@rancher/shell 0.3.4 → 0.3.6

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

@@ -5,6 +5,7 @@ import { mapPref, PLUGIN_DEVELOPER } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
 import { allHash } from '@shell/utils/promise';
 import { CATALOG, UI_PLUGIN, SERVICE } from '@shell/config/types';
+import { getVersionData } from '@shell/config/version';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { NAME as APP_PRODUCT } from '@shell/config/product/apps';
 import ActionMenu from '@shell/components/ActionMenu';
@@ -23,6 +24,8 @@ import {
   uiPluginAnnotation,
   uiPluginHasAnnotation,
   isSupportedChartVersion,
+  isChartVersionAvailableForInstall,
+  isChartVersionHigher,
   UI_PLUGIN_NAMESPACE,
   UI_PLUGIN_CHART_ANNOTATIONS
 } from '@shell/config/uiplugins';
@@ -59,6 +62,7 @@ export default {
       hasService:        false,
       defaultIcon:       require('~shell/assets/images/generic-plugin.svg'),
       reloadRequired:    false,
+      rancherVersion:    getVersionData()?.Version
     };
   },
 
@@ -183,27 +187,39 @@ export default {
         // Label can be overridden by chart annotation
         const label = uiPluginAnnotation(UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME) || chart.chartNameDisplay;
         const item = {
-          name:           chart.chartNameDisplay,
+          name:         chart.chartNameDisplay,
           label,
-          description:    chart.chartDescription,
-          id:             chart.id,
-          versions:       [],
-          displayVersion: chart.versions?.length > 0 ? chart.versions[0].version : '',
-          installed:      false,
-          builtin:        false,
-          experimental:   uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true'),
-          certified:      uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER),
+          description:  chart.chartDescription,
+          id:           chart.id,
+          versions:     [],
+          installed:    false,
+          builtin:      false,
+          experimental: uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true'),
+          certified:    uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER),
         };
 
-        this.latest = chart.versions[0];
         item.versions = [...chart.versions];
         item.chart = chart;
 
-        // Filter the versions, leaving only those that are compatible with this Rancher
-        item.versions = item.versions.filter(version => isSupportedChartVersion(version));
+        // Filter the versions available to install (plugins-api version and current dashboard version)
+        item.installableVersions = item.versions.filter(version => isSupportedChartVersion(version) && isChartVersionAvailableForInstall(version, this.rancherVersion));
 
-        if (this.latest) {
-          item.icon = chart.icon || this.latest.annotations['catalog.cattle.io/ui-icon'];
+        // add prop to version object if version is compatible with the current dashboard version
+        item.versions = item.versions.map(version => isChartVersionAvailableForInstall(version, this.rancherVersion, true));
+
+        const latestCompatible = item.installableVersions?.[0];
+        const latestNotCompatible = item.versions.find(version => !version.isCompatibleWithUi);
+
+        if (latestCompatible) {
+          item.displayVersion = latestCompatible.version;
+          item.icon = latestCompatible.icon;
+        } else {
+          item.displayVersion = item.versions?.[0]?.version;
+          item.icon = chart.icon || latestCompatible.annotations['catalog.cattle.io/ui-icon'];
+        }
+
+        if (latestNotCompatible && item.installableVersions.length && isChartVersionHigher(latestNotCompatible.version, item.installableVersions?.[0].version)) {
+          item.incompatibleDisclaimer = this.t('plugins.incompatibleDisclaimer', { version: latestNotCompatible.version, rancherVersion: latestNotCompatible.requiredUiVersion }, true);
         }
 
         if (this.installing[item.name]) {
@@ -253,8 +269,8 @@ export default {
           chart.installing = this.installing[chart.name];
 
           // Check for upgrade
-          if (chart.versions.length && p.version !== chart.versions[0].version) {
-            chart.upgrade = chart.versions[0].version;
+          if (chart.installableVersions?.length && p.version !== chart.installableVersions?.[0]?.version) {
+            chart.upgrade = chart.installableVersions[0].version;
           }
         } else {
           // No chart, so add a card for the plugin based on its Custom resource being present
@@ -619,6 +635,7 @@ export default {
             :data-testid="`extension-card-${plugin.name}`"
             @click="showPluginDetail(plugin)"
           >
+            <!-- plugin icon -->
             <div
               class="plugin-icon"
               :class="applyDarkModeBg"
@@ -636,7 +653,9 @@ export default {
                 class="icon plugin-icon-img"
               >
             </div>
+            <!-- plugin card -->
             <div class="plugin-metadata">
+              <!-- plugin basic info -->
               <div class="plugin-name">
                 {{ plugin.label }}
               </div>
@@ -654,8 +673,13 @@ export default {
                     v-if="plugin.upgrade"
                     v-tooltip="t('plugins.upgradeAvailable')"
                   > -> {{ plugin.upgrade }}</span>
+                  <p
+                    v-if="plugin.incompatibleDisclaimer"
+                    class="incompatible"
+                  >{{ plugin.incompatibleDisclaimer }}</p>
                 </span>
               </div>
+              <!-- plugin badges -->
               <div
                 v-if="plugin.builtin"
                 class="plugin-badges"
@@ -682,6 +706,7 @@ export default {
                 </div>
               </div>
               <div class="plugin-spacer" />
+              <!-- plugin badges -->
               <div class="plugin-actions">
                 <template v-if="plugin.error">
                   <div
@@ -691,6 +716,7 @@ export default {
                     <i class="icon icon-warning" />
                   </div>
                 </template>
+                <!-- plugin status -->
                 <div
                   v-if="plugin.helmError"
                   v-tooltip="t('plugins.helmError')"
@@ -713,6 +739,7 @@ export default {
                     {{ t('plugins.labels.uninstalling') }}
                   </div>
                 </div>
+                <!-- plugin buttons -->
                 <div
                   v-else-if="plugin.installed"
                   class="plugin-buttons"
@@ -734,7 +761,7 @@ export default {
                     {{ t('plugins.update.label') }}
                   </button>
                   <button
-                    v-if="!plugin.upgrade && plugin.versions.length > 1"
+                    v-if="!plugin.upgrade && plugin.installableVersions && plugin.installableVersions.length > 1"
                     class="btn role-secondary"
                     :data-testid="`extension-card-rollback-btn-${plugin.name}`"
                     @click="showInstallDialog(plugin, 'rollback', $event)"
@@ -942,6 +969,11 @@ export default {
         height: 16px;
         width: 16px;
       }
+
+      .incompatible {
+        margin: 10px 0;
+        font-weight: bold;
+      }
     }
 
     .plugin-installing {

package/pages/diagnostic.vue

@@ -18,7 +18,7 @@ export default {
     const clusterForCounts = filterHiddenLocalCluster(filterOnlyKubernetesClusters(readyClusters), this.$store);
     const finalCounts = [];
     const promises = [];
-    let topTenForResponseTime = [];
+    const topFifteenForResponseTime = [];
 
     clusterForCounts.forEach((cluster, i) => {
       // Necessary to retrieve the proper display name of the cluster
@@ -42,6 +42,7 @@ export default {
 
       if (counts) {
         const sanitizedCount = [];
+        let finalCount = [];
 
         Object.keys(counts).forEach((key) => {
           sanitizedCount[key] = counts[key].summary?.count;
@@ -53,20 +54,22 @@ export default {
 
         const sortedCount = sortBy(sanitizedCount, 'count:desc');
 
-        topTenForResponseTime = topTenForResponseTime.concat(sortedCount);
-        topTenForResponseTime = sortBy(topTenForResponseTime, 'count:desc');
-        topTenForResponseTime = topTenForResponseTime.splice(0, 15);
+        finalCount = finalCount.concat(sortedCount);
+        finalCount = sortBy(finalCount, 'count:desc');
+        finalCount = finalCount.splice(0, 15);
 
-        topTenForResponseTime.forEach((item, i) => {
-          topTenForResponseTime[i].id = finalCounts[index].id;
-          topTenForResponseTime[i].capiId = finalCounts[index].capiId;
+        finalCount.forEach((item, i) => {
+          finalCount[i].id = finalCounts[index].id;
+          finalCount[i].capiId = finalCounts[index].capiId;
         });
 
+        topFifteenForResponseTime.push(finalCount);
+
         finalCounts[index].counts = sortedCount;
       }
     });
 
-    this.topTenForResponseTime = topTenForResponseTime;
+    this.topFifteenForResponseTime = topFifteenForResponseTime;
     this.finalCounts = finalCounts;
   },
 
@@ -122,12 +125,12 @@ export default {
 
     return {
       systemInformation,
-      topTenForResponseTime: null,
-      responseTimes:         null,
-      finalCounts:           null,
-      includeResponseTimes:  true,
-      storeMapping:          this.$store?._modules?.root?.state,
-      latestLogs:            console.logs // eslint-disable-line no-console
+      topFifteenForResponseTime: null,
+      responseTimes:             null,
+      finalCounts:               null,
+      includeResponseTimes:      true,
+      storeMapping:              this.$store?._modules?.root?.state,
+      latestLogs:                console.logs // eslint-disable-line no-console
     };
   },
 
@@ -205,17 +208,21 @@ export default {
     },
 
     async gatherResponseTimes(btnCb) {
-      return await Promise.all(this.topTenForResponseTime.map((item) => {
-        const t = Date.now();
-
-        return this.$store.dispatch('management/request', { url: `/k8s/clusters/${ item.capiId }/v1/${ item.resource }` })
-          .then(() => ({
-            outcome: 'success', item, durationMs: Date.now() - t
-          }))
-          .catch(() => ({
-            outcome: 'error', item, durationMs: Date.now() - t
-          }));
-      })).then((responseTimes) => {
+      const promises = this.topFifteenForResponseTime.flatMap((cluster) => {
+        return cluster.map((item) => {
+          const t = Date.now();
+
+          return this.$store.dispatch('management/request', { url: `/k8s/clusters/${ item.capiId }/v1/${ item.resource }` })
+            .then(() => ({
+              outcome: 'success', item, durationMs: Date.now() - t
+            }))
+            .catch(() => ({
+              outcome: 'error', item, durationMs: Date.now() - t
+            }));
+        });
+      });
+
+      return await Promise.all(promises).then((responseTimes) => {
         this.responseTimes = responseTimes;
         this.setResourceResponseTiming(responseTimes);
         btnCb(true);

package/pages/home.vue

@@ -38,8 +38,13 @@ export default {
   mixins: [PageHeaderActions],
 
   fetch() {
-    this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
-    this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
+    if ( this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER) ) {
+      this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+    }
+
+    if ( this.$store.getters['management/schemaFor'](MANAGEMENT.CLUSTER) ) {
+      this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
+    }
 
     if ( this.$store.getters['management/canList'](CAPI.MACHINE) ) {
       this.$store.dispatch('management/findAll', { type: CAPI.MACHINE });
@@ -307,7 +312,7 @@ export default {
             <a
               class="hand"
               @click.prevent.stop="showWhatsNew"
-            ><span v-html="t('landing.whatsNewLink')" /></a>
+            ><span v-clean-html="t('landing.whatsNewLink')" /></a>
           </Banner>
         </div>
       </div>
@@ -330,7 +335,7 @@ export default {
                 <a
                   class="hand mr-20"
                   @click.prevent.stop="showUserPrefs"
-                ><span v-html="t('landing.landingPrefs.userPrefs')" /></a>
+                ><span v-clean-html="t('landing.landingPrefs.userPrefs')" /></a>
               </Banner>
             </div>
           </div>

package/pages/index.vue

@@ -7,7 +7,9 @@ const validRoute = (route, router) => {
 };
 
 export default {
-  middleware({ redirect, store, app } ) {
+  middleware({
+    redirect, store, app, route
+  } ) {
     const seenWhatsNew = store.getters['prefs/get'](SEEN_WHATS_NEW);
     const versionInfo = getVersionInfo(store);
     const isSingleProduct = store.getters['isSingleProduct'];
@@ -19,6 +21,13 @@ export default {
     }
 
     const afterLoginRouteObject = store.getters['prefs/afterLoginRoute'];
+    const targetRoute = app.router.resolve(afterLoginRouteObject);
+
+    // If target route is /, then we will loop with endless redirect - so detect that here and
+    // redirect to /home, which is what we would do below, if there was no `afterLoginRouteObject`
+    if (targetRoute?.route?.fullPath === '/') {
+      return redirect(dashboardHome);
+    }
 
     // Confirm this is a valid route (it could have come from an uninstalled plugin)
     if (validRoute(afterLoginRouteObject, app.router)) {

package/pages/rio/mesh.vue

@@ -1,5 +1,4 @@
 <script>
-import $ from 'jquery';
 import { escapeHtml } from '@shell/utils/string';
 
 const RADIUS = 5;
@@ -399,7 +398,7 @@ export default {
     },
 
     clicked(event) {
-      const path = $(event.target).closest('.edgePath');
+      const path = event.target.closest('.edgePath');
 
       console.log(path); // eslint-disable-line no-console
     }

package/pkg/tsconfig.json

@@ -18,7 +18,6 @@
       "webpack-env",
       "@types/node",
       "@types/jest",
-      "@nuxt/types"
     ],
     "lib": [
       "esnext",

package/plugins/clean-html-directive.js

@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import DOMPurify from 'dompurify';
+
+const ALLOWED_TAGS = [
+  'code',
+  'li',
+  'a',
+  'p',
+  'b',
+  'br',
+  'ul',
+  'pre',
+  'span',
+  'div',
+  'i',
+  'em',
+  'strong',
+];
+
+const purifyHTML = value => DOMPurify.sanitize(value, { ALLOWED_TAGS });
+
+export const cleanHtmlDirective = {
+  inserted(el, binding) {
+    el.innerHTML = purifyHTML(binding.value);
+  },
+  componentUpdated(el, binding) {
+    el.innerHTML = purifyHTML(binding.value);
+  },
+  unbind(el) {
+    el.innerHTML = '';
+  }
+};
+
+Vue.directive('clean-html', cleanHtmlDirective);

package/plugins/dashboard-store/actions.js

@@ -53,8 +53,9 @@ export async function loadSchemas(ctx, watch = true) {
 
   commit('loadAll', {
     ctx,
-    type: SCHEMA,
-    data: res.data
+    type:     SCHEMA,
+    data:     res.data,
+    revision: res.revision
   });
 
   if ( watch !== false ) {
@@ -148,11 +149,14 @@ export default {
       commit('registerType', type);
     }
 
+    // No need to request the resources if we have them already
     if ( opt.force !== true && (getters['haveAll'](type) || getters['haveAllNamespace'](type, opt.namespaced))) {
       const args = {
         type,
         revision:  '',
-        namespace: opt.watchNamespace
+        // watchNamespace - used sometimes when we haven't fetched the results of a single namespace
+        // namespaced - used when we have fetched the result of a single namespace (see https://github.com/rancher/dashboard/pull/7329/files)
+        namespace: opt.watchNamespace || opt.namespaced
       };
 
       if (opt.watch !== false ) {
@@ -304,17 +308,21 @@ export default {
           ctx,
           type,
           data:      out.data,
+          revision:  out.revision,
           skipHaveAll,
           namespace: opt.namespaced,
         });
       }
     }
 
+    // ToDo: SM if we start a "bigger" watch (such as watch without a namespace vs a watch with a namespace), we should stop the stop the "smaller" watch so we don't have duplicate events coming back
     if ( opt.watch !== false ) {
       dispatch('watch', {
         type,
         revision:  out.revision,
-        namespace: opt.watchNamespace
+        namespace: opt.watchNamespace || opt.namespaced, // it could be either apparently
+        // ToDo: SM namespaced is sometimes a boolean and sometimes a string, I don't see it as especially broken but we should refactor that in the future
+        force:     opt.forceWatch === true,
       });
     }
 
@@ -369,15 +377,17 @@ export default {
     commit('loadSelector', {
       ctx,
       type,
-      entries: res.data,
-      selector
+      entries:  res.data,
+      selector,
+      revision: res.revision,
     });
 
     if ( opt.watch !== false ) {
       dispatch('watch', {
         type,
         selector,
-        revision: res.revision
+        revision: res.revision,
+        force:    opt.forceWatch === true,
       });
     }
 
@@ -394,6 +404,12 @@ export default {
   //  url: Use this specific URL instead of looking up the URL for the type/id.  This should only be used for bootstrapping schemas on startup.
   //  @TODO depaginate: If the response is paginated, retrieve all the pages. (default: true)
   async find(ctx, { type, id, opt }) {
+    if (!id) {
+      console.error('Attempting to find a resource with no id', type, id); // eslint-disable-line no-console
+
+      return;
+    }
+
     const { getters, dispatch } = ctx;
 
     opt = opt || {};
@@ -459,6 +475,11 @@ export default {
         commit('registerType', type);
       }
     }
+    // Inject special fields for indexing schemas
+    if ( type === SCHEMA ) {
+      addSchemaIndexFields(data);
+    }
+
     const keyField = getters.keyFieldForType(type);
     const id = data?.[keyField] || existing?.[keyField];
 
@@ -531,8 +552,10 @@ export default {
 
   // Forget a type in the store
   // Remove all entries for that type and stop watching it
-  forgetType({ commit, getters, dispatch }, type) {
-    dispatch('unwatch', type);
+  forgetType({ commit, dispatch, state }, type) {
+    state.started
+      .filter(entry => entry.type === type)
+      .forEach(entry => dispatch('unwatch', entry));
 
     commit('forgetType', type);
   },

package/plugins/dashboard-store/index.js

@@ -38,7 +38,7 @@ export default (vuexModule, config, init) => {
     store.registerModule(namespace, vuexModule);
     store.commit(`${ namespace }/applyConfig`, config);
 
-    if ( !process.client || !window.__NUXT__ ) {
+    if ( !process.client ) {
       return;
     }
 

package/plugins/dashboard-store/mutations.js

@@ -261,7 +261,8 @@ export function loadAll(state, {
   data,
   ctx,
   skipHaveAll,
-  namespace
+  namespace,
+  revision
 }) {
   const { getters } = ctx;
 
@@ -283,6 +284,7 @@ export function loadAll(state, {
 
   clear(cache.list);
   cache.map.clear();
+  cache.revision = revision || 0;
   cache.generation++;
 
   addObjects(cache.list, proxies);
@@ -320,7 +322,7 @@ export default {
   },
 
   loadSelector(state, {
-    type, entries, ctx, selector
+    type, entries, ctx, selector, revision
   }) {
     const cache = registerType(state, type);
 
@@ -329,6 +331,7 @@ export default {
     }
 
     cache.haveSelector[selector] = true;
+    cache.revision = revision || 0;
   },
 
   loadAll,

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

@@ -1110,7 +1110,7 @@ export default class Resource {
     }
 
     // @TODO remove this once the API maps steve _type <-> k8s type in both directions
-    opt.data = { ...this };
+    opt.data = this.toSave() || { ...this };
 
     if (opt?.data._type) {
       opt.data.type = opt.data._type;
@@ -1884,6 +1884,13 @@ export default class Resource {
     return out;
   }
 
+  /**
+   * Allow models to override the object that is sent when saving this resource
+   */
+  toSave() {
+    return undefined;
+  }
+
   get creationTimestamp() {
     return this.metadata?.creationTimestamp;
   }

package/plugins/plugin.js

@@ -2,23 +2,9 @@
 import { allHashSettled } from '@shell/utils/promise';
 import { shouldNotLoadPlugin, UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 
-const META_NAME_PREFIX = 'app-autoload-';
-
 export default async function(context) {
-  // UI Plugins declared in the HTML head
-  const meta = context.app?.head?.meta || [];
   const hash = {};
 
-  meta.forEach((m) => {
-    const metaName = m.name || '';
-
-    if (metaName.indexOf(META_NAME_PREFIX) === 0) {
-      const name = metaName.substr(META_NAME_PREFIX.length);
-
-      hash[name] = context.$plugin.loadAsync(name, m.content);
-    }
-  });
-
   // Provide a mechanism to load the UI without the plugins loaded - in case there is a problem
   let loadPlugins = true;
 

package/plugins/portal-vue.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import PortalVue from 'portal-vue';
+
+Vue.use(PortalVue);

package/plugins/steve/mutations.js

@@ -121,7 +121,8 @@ export default {
     data,
     ctx,
     skipHaveAll,
-    namespace
+    namespace,
+    revision
   }) {
     // Performance testing in dev and when env var is set
     if (process.env.dev && !!process.env.perfTest) {
@@ -129,7 +130,7 @@ export default {
     }
 
     const proxies = loadAll(state, {
-      type, data, ctx, skipHaveAll, namespace
+      type, data, ctx, skipHaveAll, namespace, revision
     });
 
     // If we loaded a set of pods, then update the podsByNamespace cache

package/plugins/steve/steve-description-class.js

@@ -20,7 +20,7 @@ export default class SteveDescriptionModel extends SteveModel {
     this._description = value;
   }
 
-  // Ensure when we clone that we preserve the desription
+  // Ensure when we clone that we preserve the description
   toJSON() {
     const data = super.toJSON();
 
@@ -29,4 +29,8 @@ export default class SteveDescriptionModel extends SteveModel {
 
     return data;
   }
+
+  toSave() {
+    return this.toJSON();
+  }
 }