@rancher/shell 3.0.11 → 3.0.12-rc.2

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

@@ -5,7 +5,8 @@ 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 { CATALOG, UI_PLUGIN, MANAGEMENT } from '@shell/config/types';
+import { isMissingDate } from '@shell/utils/time';
 import { SETTING } from '@shell/config/settings';
 import { fetchOrCreateSetting } from '@shell/utils/settings';
 import { getVersionData, isRancherPrime } from '@shell/config/version';
@@ -101,6 +102,14 @@ export default {
       hash.helmOps = this.$store.dispatch('management/findAll', { type: CATALOG.OPERATION });
     }
 
+    // Load apps in UI_PLUGIN_NAMESPACE to determine which repo an extension was installed from
+    if (this.$store.getters['management/schemaFor'](CATALOG.APP)) {
+      hash.apps = this.$store.dispatch('management/findAll', {
+        type: CATALOG.APP,
+        opt:  { namespaced: UI_PLUGIN_NAMESPACE }
+      });
+    }
+
     if (this.$store.getters['management/schemaFor'](CATALOG.CLUSTER_REPO)) {
       hash.repos = this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO }, { force: true });
     }
@@ -127,6 +136,12 @@ export default {
     ...mapGetters({ uiErrors: 'uiplugins/errors' }),
     ...mapGetters({ theme: 'prefs/theme' }),
 
+    // Computed to reactively update when new apps are installed
+    apps() {
+      return this.$store.getters['management/all'](CATALOG.APP)
+        .filter((app) => app.metadata?.namespace === UI_PLUGIN_NAMESPACE);
+    },
+
     charts() {
       const c = this.$store.getters['catalog/rawCharts'];
 
@@ -313,8 +328,8 @@ export default {
           }
         }
 
-        if (this.installing[item.name]) {
-          item.installing = this.installing[item.name];
+        if (this.installing[item.id]) {
+          item.installing = this.installing[item.id];
         }
 
         return item;
@@ -359,15 +374,23 @@ export default {
 
       // Go through the CRs for the plugins and wire them into the catalog
       this.plugins.forEach((p) => {
-        const chart = all.find((c) => c.name === p.name);
+        let chart;
+        const app = this.apps.find((a) => a.metadata.name === p.name && a.metadata.namespace === UI_PLUGIN_NAMESPACE);
+        const originalRepoName = app?.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.SOURCE_REPO_NAME] || app?.metadata?.labels?.[CATALOG_ANNOTATIONS.CLUSTER_REPO_NAME];
 
+        // Find the chart from the original repo to avoid picking a wrong chart with the same name
+        if (originalRepoName) {
+          chart = all.find((c) => c.name === p.name && c.chart?.repoName === originalRepoName);
+        }
+
+        // If original repo was removed, don't fall back to another repo's chart (would break Available tab)
         if (chart) {
           chart.installed = true;
           chart.uiplugin = p;
           chart.installedVersion = p.version;
 
           // Can't do this here
-          chart.installing = this.installing[chart.name];
+          chart.installing = this.installing[chart.id];
 
           // Check for upgrade
           const latestInstallableVersion = chart.installableVersions?.[0];
@@ -385,20 +408,34 @@ export default {
             chart.upgrade = getPluginChartVersionLabel(latestInstallableVersion);
           }
         } else {
-          // No chart, so add a card for the plugin based on its Custom resource being present
+          // No chart available - original repo was removed or developer-loaded plugin
+          const appChartMeta = app?.spec?.chart?.metadata;
+          const appAnnotations = appChartMeta?.annotations || {};
+          let originalRepoDisplayName = null;
+
+          if (originalRepoName) {
+            originalRepoDisplayName = this.$store.getters['i18n/withFallback'](`catalog.repo.name."${ originalRepoName }"`, null, originalRepoName);
+          }
+
           const item = {
-            name:                p.name,
-            label:               p.name,
-            description:         p.description || '-',
-            id:                  `${ p.name }-${ p.version }`,
-            versions:            [],
-            displayVersion:      p.version,
-            displayVersionLabel: p.version || '-',
-            isDeveloper:         p.isDeveloper,
-            installed:           true,
-            installing:          false,
-            builtin:             false,
-            uiplugin:            p,
+            name:                    p.name,
+            label:                   appAnnotations[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || appChartMeta?.name || p.name,
+            description:             appChartMeta?.description || p.description || '-',
+            icon:                    appChartMeta?.icon || appAnnotations['catalog.cattle.io/ui-icon'],
+            id:                      `${ p.name }-${ p.version }`,
+            versions:                [],
+            displayVersion:          p.version,
+            displayVersionLabel:     p.version || '-',
+            isDeveloper:             p.isDeveloper,
+            installed:               true,
+            installedVersion:        p.version,
+            installing:              false,
+            builtin:                 false,
+            uiplugin:                p,
+            primeOnly:               appAnnotations[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true',
+            experimental:            appAnnotations[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true',
+            certified:               appAnnotations[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER,
+            originalRepoNameDisplay: originalRepoDisplayName,
           };
 
           all.push(item);
@@ -422,7 +459,7 @@ export default {
 
       // Merge in the plugin load errors from help ops
       Object.keys(this.errors).forEach((e) => {
-        const chart = all.find((c) => c.name === e);
+        const chart = all.find((c) => c.id === e);
 
         if (chart) {
           chart.helmError = !!this.errors[e];
@@ -456,28 +493,50 @@ export default {
           const op = pluginOps.find((o) => o.status?.releaseName === plugin.name);
 
           if (op) {
+            const allWithSameName = this.available.filter((p) => p.name === plugin.name);
+            let targetPluginId;
+
+            // When multiple plugins share the same name (from different repositories),
+            // a single helm operation will trigger updates. We need to correctly identify
+            // the specific plugin that is either currently being installed/updated or is already installed
+            // so we don't accidentally mark all identically named plugins as "installing".
+            const installingPlugin = allWithSameName.find((p) => this.installing[p.id]);
+            const installedPlugin = allWithSameName.find((p) => p.installed);
+
+            if (installingPlugin) {
+              targetPluginId = installingPlugin.id;
+            } else if (installedPlugin) {
+              targetPluginId = installedPlugin.id;
+            } else {
+              targetPluginId = allWithSameName[0]?.id;
+            }
+
+            if (plugin.id !== targetPluginId) {
+              return;
+            }
+
             const active = op.metadata.state?.transitioning;
             const error = op.metadata.state?.error;
 
-            this.errors[plugin.name] = error;
+            this.errors[plugin.id] = error;
 
             if (active) {
             // Can use the status directly, apart from upgrade, which maps to update
               const status = op.status.action;
 
-              if (status === 'upgrade' && this.installing[plugin.name] === 'downgrade') {
+              if (status === 'upgrade' && this.installing[plugin.id] === 'downgrade') {
                 // Helm op is an upgrade, but we initiated a downgrade, so keep the 'downgrade' status
               } else {
-                this.updatePluginInstallStatus(plugin.name, status);
+                this.updatePluginInstallStatus(plugin.id, status);
               }
             } else if (op.status.action === 'uninstall') {
             // Uninstall has finished
-              this.updatePluginInstallStatus(plugin.name, false);
+              this.updatePluginInstallStatus(plugin.id, false);
             } else if (error) {
-              this.updatePluginInstallStatus(plugin.name, false);
+              this.updatePluginInstallStatus(plugin.id, false);
             }
           } else {
-            this.updatePluginInstallStatus(plugin.name, false);
+            this.updatePluginInstallStatus(plugin.id, false);
           }
         });
       },
@@ -503,7 +562,11 @@ export default {
               changes++;
             }
 
-            this.updatePluginInstallStatus(plugin.name, false);
+            (this.available || []).forEach((c) => {
+              if (c.name === plugin.name) {
+                this.updatePluginInstallStatus(c.id, false);
+              }
+            });
           }
         });
 
@@ -596,6 +659,35 @@ export default {
       ev?.preventDefault?.();
       ev?.stopPropagation?.();
 
+      // Check if a plugin with the same name is already installed from a different repo
+      if (action === 'install') {
+        const installedPlugin = this.available.find((p) => p.name === plugin.name && p.installed);
+        const isInstalledFromDifferentSource = !!installedPlugin && installedPlugin.id !== plugin.id;
+
+        if (isInstalledFromDifferentSource) {
+          // Show a different dialog that prompts the user to uninstall the existing version first
+          this.$store.dispatch('management/promptModal', {
+            component:                            'UninstallExistingExtensionDialog',
+            testId:                               'uninstall-existing-extension-modal',
+            returnFocusSelector:                  `[data-testid="extension-card-${ action }-btn-${ plugin?.name }"]`,
+            returnFocusFirstIterableNodeSelector: '#extensions-main-page',
+            componentProps:                       {
+              installedPlugin,
+              updateStatus: (pluginId, type) => {
+                this.updatePluginInstallStatus(pluginId, type);
+              },
+              closed: (res) => {
+                if (res?.uninstalled) {
+                  this.didUninstall(res.plugin);
+                }
+              }
+            }
+          });
+
+          return;
+        }
+      }
+
       this.$store.dispatch('management/promptModal', {
         component:                            'InstallExtensionDialog',
         testId:                               'install-extension-modal',
@@ -605,8 +697,8 @@ export default {
           plugin,
           action,
           initialVersion,
-          updateStatus: (pluginName, type) => {
-            this.updatePluginInstallStatus(pluginName, type);
+          updateStatus: (pluginId, type) => {
+            this.updatePluginInstallStatus(pluginId, type);
           },
           closed: (res) => {
             this.didInstall(res);
@@ -627,8 +719,8 @@ export default {
         returnFocusFirstIterableNodeSelector: '#extensions-main-page',
         componentProps:                       {
           plugin,
-          updateStatus: (pluginName, type) => {
-            this.updatePluginInstallStatus(pluginName, type);
+          updateStatus: (pluginId, type) => {
+            this.updatePluginInstallStatus(pluginId, type);
           },
           closed: (res) => {
             this.didUninstall(res);
@@ -639,7 +731,7 @@ export default {
 
     didUninstall(plugin) {
       if (plugin) {
-        this.updatePluginInstallStatus(plugin.name, 'uninstall');
+        this.updatePluginInstallStatus(plugin.id, 'uninstall');
 
         if (plugin.catalog) {
           this.refreshCharts();
@@ -666,8 +758,8 @@ export default {
       this.$refs.infoPanel.show({ ...plugin, tags });
     },
 
-    updatePluginInstallStatus(name, status) {
-      this.installing[name] = status;
+    updatePluginInstallStatus(id, status) {
+      this.installing[id] = status;
     },
 
     setMenu(event) {
@@ -805,18 +897,12 @@ export default {
         label:       plugin.displayVersionLabel,
       }];
 
-      if (plugin.created) {
-        const hasZeroTime = plugin.created === ZERO_TIME;
-        const lastUpdatedItem = {
+      if (!isMissingDate(plugin.created)) {
+        items.push({
           icon:        'icon-refresh-alt',
           iconTooltip: { key: 'tableHeaders.lastUpdated' },
-          label:       hasZeroTime ? this.t('generic.na') : day(plugin.created).format('MMM D, YYYY')
-        };
-
-        if (hasZeroTime) {
-          lastUpdatedItem.labelTooltip = this.t('catalog.charts.appChartCard.subHeaderItem.missingVersionDate');
-        }
-        items.push(lastUpdatedItem);
+          label:       day(plugin.created).format('MMM D, YYYY')
+        });
       }
 
       if (plugin.installing) {
@@ -850,6 +936,17 @@ export default {
     },
 
     getFooterItems(plugin) {
+      const footerItems = [];
+      const repoNameToDisplay = plugin?.chart?.repoNameDisplay || plugin?.originalRepoNameDisplay;
+
+      if (repoNameToDisplay) {
+        footerItems.push({
+          icon:        'repository-alt',
+          iconTooltip: { key: 'tableHeaders.repoName' },
+          labels:      [repoNameToDisplay]
+        });
+      }
+
       const labels = [];
 
       // "developer load" tag
@@ -873,34 +970,41 @@ export default {
         labels.push(this.t('plugins.labels.experimental'));
       }
 
-      return labels.length ? [{
-        icon:        'tag-alt',
-        iconTooltip: { key: 'generic.tags' },
-        labels,
-      }] : [];
+      if (labels.length) {
+        footerItems.push({
+          icon:        'tag-alt',
+          iconTooltip: { key: 'generic.tags' },
+          labels,
+        });
+      }
+
+      return footerItems;
     },
 
     getStatuses(plugin) {
       const statuses = [];
 
-      const errorTooltip = plugin.installedError || plugin.incompatibilityMessage || (plugin.helmError ? this.t('plugins.helmError') : null);
-      const isDeprecated = plugin?.chart?.deprecated;
+      const errorMsg = plugin.installedError || (plugin.helmError ? this.t('plugins.helmError') : null);
+      const incompatibilityMsg = plugin.incompatibilityMessage;
+      const isDeprecated = uiPluginHasAnnotation(plugin?.chart, CATALOG_ANNOTATIONS.DEPRECATED, 'true');
 
-      if (isDeprecated || errorTooltip) {
-        let tooltip;
+      const tooltipMsgs = [];
 
-        if (isDeprecated && errorTooltip) {
-          tooltip = { text: `${ this.t('generic.deprecated') }. ${ this.t('generic.error') }: ${ errorTooltip }` };
-        } else if (isDeprecated) {
-          tooltip = { key: 'generic.deprecated' };
-        } else { // errorTooltip is present
-          tooltip = { text: `${ this.t('generic.error') }: ${ errorTooltip }` };
-        }
+      if (isDeprecated) {
+        tooltipMsgs.push(this.t('generic.deprecated'));
+      }
+
+      if (errorMsg) {
+        tooltipMsgs.push(errorMsg);
+      } else if (incompatibilityMsg) {
+        tooltipMsgs.push(incompatibilityMsg);
+      }
 
+      if (tooltipMsgs.length) {
         statuses.push({
-          icon:  'icon-alert-alt',
-          color: 'error',
-          tooltip
+          icon:    'icon-alert-alt',
+          color:   'error',
+          tooltip: { text: tooltipMsgs.join('<br/>') }
         });
       }
 

package/plugins/dashboard-store/__tests__/resource-class.test.ts

@@ -436,6 +436,7 @@ describe('class: Resource', () => {
       }, {
         getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
         dispatch:    jest.fn(),
+        rootState:   { $extension: { getPlugins: () => ({}) } },
         rootGetters: {
           'i18n/t':            (key: string) => key,
           currentCluster:      undefined,

package/plugins/dashboard-store/actions.js

@@ -494,8 +494,9 @@ export default {
     // Of type @StorePaginationResult
     const pagination = opt.pagination ? {
       request: {
-        namespace:  opt.namespaced,
-        pagination: opt.pagination
+        namespace:             opt.namespaced,
+        pagination:            opt.pagination,
+        includeAssociatedData: opt.includeAssociatedData,
       },
       result: {
         count:     out.count,

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

@@ -1358,7 +1358,35 @@ export default class Resource {
     return window.$globalApp.$router;
   }
 
+  get isProdRegistrationV2TopLevelProductResoure() {
+    // this is the logic to determine if the resource is top level product or not
+    // changes c-cluster-product-resource to product-c-cluster-resource
+    // this is for the new extension product registration model
+    let currPluginName = '';
+    const plugins = this.$extension.getPlugins();
+
+    Object.keys(plugins).forEach((key) => {
+      if (plugins[key].productNames.includes(this.$rootGetters['productId'])) {
+        currPluginName = key;
+      }
+    });
+
+    // the flag "topLevelProduct" only exists in the V2 product registration model
+    return plugins[currPluginName]?.topLevelProduct || false;
+  }
+
   get listLocation() {
+    if (this.isProdRegistrationV2TopLevelProductResoure) {
+      return {
+        name:   `${ this.$rootGetters['productId'] }-c-cluster-resource`,
+        params: {
+          product:  this.$rootGetters['productId'],
+          cluster:  this.$rootGetters['clusterId'],
+          resource: this.type,
+        }
+      };
+    }
+
     return {
       name:   `c-cluster-product-resource`,
       params: {
@@ -1375,6 +1403,20 @@ export default class Resource {
 
     const id = this.id?.replace(/.*\//, '');
 
+    if (this.isProdRegistrationV2TopLevelProductResoure) {
+      return {
+        name:   `${ this.$rootGetters['productId'] }-c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`,
+        params: {
+          product:   this.$rootGetters['productId'],
+          cluster:   this.$rootGetters['clusterId'],
+          resource:  this.type,
+          namespace: isNamespaced && this.metadata?.namespace ? this.metadata.namespace : undefined,
+          id,
+        }
+      };
+    }
+
+    // normal cluster scoped resource route as we know
     return {
       name:   `c-cluster-product-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`,
       params: {
@@ -1935,6 +1977,25 @@ export default class Resource {
 
   get _glance() {
     const type = this.parentNameOverride || this.$rootGetters['type-map/labelFor'](this.schema);
+    let toRoute = null;
+
+    if (this.isProdRegistrationV2TopLevelProductResoure) {
+      toRoute = {
+        name:   `${ this.$rootGetters['productId'] }-c-cluster-resource-id`,
+        params: {
+          product:  this.$rootGetters['currentProduct']?.id,
+          cluster:  this.$rootGetters['currentCluster']?.id,
+          resource: this.type,
+        }
+      };
+    } else {
+      toRoute = {
+        name:     `c-cluster-product-resource-id`,
+        product:  this.$rootGetters['currentProduct']?.id,
+        cluster:  this.$rootGetters['currentCluster']?.id,
+        resource: this.type
+      };
+    }
 
     return [
       {
@@ -1958,12 +2019,7 @@ export default class Resource {
         label:         this.t('component.resource.detail.glance.namespace'),
         formatter:     this.$rootGetters['currentProduct']?.id && this.$rootGetters['currentCluster']?.id ? 'Link' : undefined,
         formatterOpts: {
-          to: {
-            name:     `c-cluster-product-resource-id`,
-            product:  this.$rootGetters['currentProduct']?.id,
-            cluster:  this.$rootGetters['currentCluster']?.id,
-            resource: this.type
-          },
+          to:      toRoute,
           row:     {},
           options: { internal: true }
         },

package/plugins/plugin.js

@@ -3,6 +3,8 @@ import { allHashSettled } from '@shell/utils/promise';
 import { shouldNotLoadPlugin, UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 import { getKubeVersionData, getVersionData } from '@shell/config/version';
 import versions from '@shell/utils/versions';
+import { listProducts, loadProduct } from '@shell/utils/dynamic-importer';
+import { Plugin as UIPlugin } from '@shell/core/plugin';
 
 export default async function(context) {
   if (process.env.excludeOperatorPkg === 'true') {
@@ -43,6 +45,20 @@ export default async function(context) {
   try {
     const res = await allHashSettled(fetches);
 
+    // Allow legacy products in shell/config/product to be loaded as if they came from an extension (if migrated to use $init)
+    for (const product of listProducts()) {
+      const impl = await loadProduct(product);
+
+      if (impl?.$init) {
+        const p = new UIPlugin(product);
+
+        impl.$init(p);
+
+        context.$plugin._add(product, p);
+        context.$plugin.applyPlugin(p);
+      }
+    }
+
     // Initialize the built-in extensions now - this is now done here so that built-in extensions get the same, correct environment data (version etc)
     context.$extension.loadBuiltinExtensions();
 

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

@@ -23,6 +23,7 @@ import { PaginationSettingsStores } from '@shell/types/resources/settings';
 import paginationUtils from '@shell/utils/pagination-utils';
 import { KubeLabelSelector, KubeLabelSelectorExpression } from '@shell/types/kube/kube-api';
 import { parseField } from '@shell/utils/sort';
+import { POD_LAST_RESTART_FIELD, POD_RESTART_FIELD } from '@shell/types/resources/pod';
 
 /**
  * This is a workaround for a ts build issue found in check-plugins-build.
@@ -240,6 +241,8 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     [POD]: [
       { field: 'spec.containers.image' },
       { field: 'spec.nodeName' },
+      { field: POD_RESTART_FIELD },
+      { field: POD_LAST_RESTART_FIELD },
     ],
     [MANAGEMENT.NODE]: [
       { field: 'status.nodeName' },
@@ -514,6 +517,10 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       }
     }
 
+    if (opt.includeAssociatedData) {
+      params.push('includeAssociatedData=true');
+    }
+
     // Note - There is a `limit` property that is by default 100,000. This can be disabled by using `limit=-1`,
     // but we shouldn't be fetching any pages big enough to exceed the default