@rancher/shell 0.3.9 → 0.3.11

package/pages/c/_cluster/apps/charts/install.vue

@@ -1500,46 +1500,45 @@ export default {
         </div>
       </template>
       <template #helmValues>
-        <div class="sticky-header">
-          <Banner
-            v-if="step2Description"
-            color="info"
-            class="description"
+        <Banner
+          v-if="step2Description"
+          color="info"
+          class="description"
+        >
+          {{ step2Description }}
+        </Banner>
+        <div class="step__values__controls">
+          <ButtonGroup
+            v-model="preFormYamlOption"
+            :options="formYamlOptions"
+            inactive-class="bg-disabled btn-sm"
+            active-class="bg-primary btn-sm"
+            :disabled="preFormYamlOption != formYamlOption"
+          />
+          <div class="step__values__controls--spacer">
+&nbsp;
+          </div>
+          <ButtonGroup
+            v-if="showDiff"
+            v-model="diffMode"
+            :options="yamlDiffModeOptions"
+            inactive-class="bg-disabled btn-sm"
+            active-class="bg-primary btn-sm"
+          />
+          <div
+            v-if="hasReadme && !showingReadmeWindow"
+            class="btn-group"
           >
-            {{ step2Description }}
-          </Banner>
-          <div class="step__values__controls">
-            <ButtonGroup
-              v-model="preFormYamlOption"
-              :options="formYamlOptions"
-              inactive-class="bg-disabled btn-sm"
-              active-class="bg-primary btn-sm"
-              :disabled="preFormYamlOption != formYamlOption"
-            />
-            <div class="step__values__controls--spacer">
-  &nbsp;
-            </div>
-            <ButtonGroup
-              v-if="showDiff"
-              v-model="diffMode"
-              :options="yamlDiffModeOptions"
-              inactive-class="bg-disabled btn-sm"
-              active-class="bg-primary btn-sm"
-            />
-            <div
-              v-if="hasReadme && !showingReadmeWindow"
-              class="btn-group"
+            <button
+              type="button"
+              class="btn bg-primary btn-sm"
+              @click="showSlideIn = !showSlideIn"
             >
-              <button
-                type="button"
-                class="btn bg-primary btn-sm"
-                @click="showSlideIn = !showSlideIn"
-              >
-                {{ t('catalog.install.steps.helmValues.chartInfo.button') }}
-              </button>
-            </div>
+              {{ t('catalog.install.steps.helmValues.chartInfo.button') }}
+            </button>
           </div>
         </div>
+
         <div class="scroll__container">
           <div class="scroll__content">
             <!-- Values (as Custom Component in ./shell/charts/) -->
@@ -1726,7 +1725,7 @@ export default {
         {{ t('catalog.install.steps.helmValues.chartInfo.label') }}
         <div class="slideIn__header__buttons">
           <div
-            v-tooltip="t('catalog.install.slideIn.dock')"
+            v-clean-tooltip="t('catalog.install.slideIn.dock')"
             class="slideIn__header__button"
             @click="showSlideIn = false; showReadmeWindow()"
           >
@@ -1782,7 +1781,6 @@ export default {
           </div>
         </div>
       </div>
-
       <Banner
         color="warning"
         class="description"
@@ -1816,7 +1814,7 @@ export default {
 
   .install-steps {
     padding-top: 0;
-
+    height: 0;
     position: relative;
     overflow: hidden;
 
@@ -1961,14 +1959,16 @@ export default {
     &__container {
       $yaml-height: 200px;
       min-height: $yaml-height;
-      height: 0;
+      margin-bottom: 60px;
+      overflow: auto;
+      display: flex;
+      flex: 1;
     }
     &__content {
       display: flex;
       flex: 1;
       overflow: auto;
     }
-
   }
 
   ::v-deep .yaml-editor {
@@ -1978,8 +1978,8 @@ export default {
 .outer-container {
   display: flex;
   flex-direction: column;
-  flex: 1;
   padding: 0;
+  height: calc(100% - 112px);
 }
 
 .header {
@@ -2058,13 +2058,4 @@ export default {
   margin-top: 5px;
 }
 
-.sticky-header {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  background: var(--primary-text);
-}
-
 </style>

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

@@ -459,7 +459,7 @@ export default {
       </div>
       <p
         v-if="displayPspDeprecationBanner && hidePspDeprecationBanner"
-        v-tooltip="t('landing.deprecatedPsp')"
+        v-clean-tooltip="t('landing.deprecatedPsp')"
         class="alt-psp-deprecation-info"
       >
         <span>{{ t('landing.psps') }}</span>

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

@@ -170,7 +170,7 @@ export default {
           <a
             v-for="fel in externalLinks"
             :key="fel.label"
-            v-tooltip="
+            v-clean-tooltip="
               !fel.enabled ? t('monitoring.overview.linkedList.na') : undefined
             "
             :href="fel.enabled ? fel.link : void 0"

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

@@ -9,6 +9,18 @@ import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import UnitInput from '@shell/components/form/UnitInput';
 
+const incompatible = {
+  incrementalLoading: ['forceNsFilterV2'],
+  manualRefresh:      ['forceNsFilterV2'],
+  forceNsFilterV2:    ['incrementalLoading', 'manualRefresh'],
+};
+
+const l10n = {
+  incrementalLoading: 'incrementalLoad',
+  manualRefresh:      'manualRefresh',
+  forceNsFilterV2:    'nsFiltering',
+};
+
 export default {
   layout:     'authenticated',
   components: {
@@ -102,8 +114,42 @@ export default {
         this.errors.push(err);
         btnCB(false);
       }
+    },
+
+    compatibleWarning(property, enabled) {
+      if (!enabled) {
+        // Disabling a preference won't automatically turn on an incompatible one, so just set and exit
+        this.value[property].enabled = false;
+
+        return;
+      }
+
+      // We're enabling a preference. Are there any incomaptible preferences?
+      if ((incompatible[property] || []).every(p => !this.value[p].enabled)) {
+        // No, just set and exit
+        this.value[property].enabled = true;
+
+        return;
+      }
+
+      // Incompatible preferences found, so confirm with user before applying
+      this.$store.dispatch('cluster/promptModal', {
+        component:      'GenericPrompt',
+        componentProps: {
+          applyMode:   'enable',
+          applyAction: (buttonDone) => {
+            this.value[property].enabled = true;
+            (incompatible[property] || []).forEach((incompatible) => {
+              this.value[incompatible].enabled = false;
+            });
+            buttonDone(true);
+          },
+          title: this.t('promptRemove.title', {}, true),
+          body:  this.t(`performance.${ l10n[property] }.incompatibleDescription`, {}, true),
+        },
+      });
     }
-  }
+  },
 };
 </script>
 <template>
@@ -159,11 +205,12 @@ export default {
           <h2>{{ t('performance.incrementalLoad.label') }}</h2>
           <p>{{ t('performance.incrementalLoad.description') }}</p>
           <Checkbox
-            v-model="value.incrementalLoading.enabled"
+            :value="value.incrementalLoading.enabled"
             :mode="mode"
             :label="t('performance.incrementalLoad.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
+            @input="compatibleWarning('incrementalLoading', $event)"
           />
           <div class="ml-20">
             <p :class="{ 'text-muted': !value.incrementalLoading.enabled }">
@@ -189,11 +236,12 @@ export default {
             label-key="performance.experimental"
           />
           <Checkbox
-            v-model="value.manualRefresh.enabled"
+            :value="value.manualRefresh.enabled"
             :mode="mode"
             :label="t('performance.manualRefresh.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
+            @input="compatibleWarning('manualRefresh', $event)"
           />
           <div class="ml-20">
             <p :class="{ 'text-muted': !value.manualRefresh.enabled }">
@@ -299,26 +347,13 @@ export default {
             label-key="performance.experimental"
           />
           <Checkbox
-            v-model="value.forceNsFilter.enabled"
+            :value="value.forceNsFilterV2.enabled"
             :mode="mode"
             :label="t('performance.nsFiltering.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
+            @input="compatibleWarning('forceNsFilterV2', $event)"
           />
-          <div class="ml-20">
-            <p :class="{ 'text-muted': !value.forceNsFilter.enabled }">
-              {{ t('performance.nsFiltering.count.description') }}
-            </p>
-            <LabeledInput
-              v-model="value.forceNsFilter.threshold"
-              :mode="mode"
-              :label="t('performance.nsFiltering.count.inputLabel')"
-              :disabled="!value.forceNsFilter.enabled"
-              class="input"
-              type="number"
-              min="0"
-            />
-          </div>
         </div>
         <!-- Advanced Websocket Worker -->
         <div class="mt-40">

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

@@ -206,7 +206,7 @@ export default {
             :key="v.version"
           >
             <a
-              v-tooltip="v.requiredUiVersion ? t('plugins.info.requiresVersion', { version: v.requiredUiVersion }) : ''"
+              v-clean-tooltip="v.requiredUiVersion ? t('plugins.info.requiresVersion', { version: v.requiredUiVersion }) : ''"
               class="version-link"
               :class="{'version-active': v.version === infoVersion, 'disabled': !v.isCompatibleWithUi}"
               @click="loadPluginVersionInfo(v.version)"

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

@@ -400,6 +400,13 @@ export default {
   },
 
   methods: {
+    async refreshCharts() {
+      await this.$store.dispatch('catalog/load');
+      const c = this.$store.getters['catalog/rawCharts'];
+
+      this.charts = Object.values(c);
+    },
+
     async updateInstallStatus() {
       let hasService;
 
@@ -415,6 +422,10 @@ export default {
         hasService = false;
       }
 
+      if (hasService) {
+        this.refreshCharts();
+      }
+
       Vue.set(this, 'hasService', hasService);
 
       return hasService;
@@ -671,7 +682,7 @@ export default {
                   <span>{{ plugin.displayVersion }}</span>
                   <span
                     v-if="plugin.upgrade"
-                    v-tooltip="t('plugins.upgradeAvailable')"
+                    v-clean-tooltip="t('plugins.upgradeAvailable')"
                   > -> {{ plugin.upgrade }}</span>
                   <p
                     v-if="plugin.incompatibleDisclaimer"
@@ -694,13 +705,13 @@ export default {
               >
                 <div
                   v-if="!plugin.certified"
-                  v-tooltip="t('plugins.descriptions.third-party')"
+                  v-clean-tooltip="t('plugins.descriptions.third-party')"
                 >
                   {{ t('plugins.labels.third-party') }}
                 </div>
                 <div
                   v-if="plugin.experimental"
-                  v-tooltip="t('plugins.descriptions.experimental')"
+                  v-clean-tooltip="t('plugins.descriptions.experimental')"
                 >
                   {{ t('plugins.labels.experimental') }}
                 </div>
@@ -710,7 +721,7 @@ export default {
               <div class="plugin-actions">
                 <template v-if="plugin.error">
                   <div
-                    v-tooltip="plugin.error"
+                    v-clean-tooltip="plugin.error"
                     class="plugin-error"
                   >
                     <i class="icon icon-warning" />
@@ -719,7 +730,7 @@ export default {
                 <!-- plugin status -->
                 <div
                   v-if="plugin.helmError"
-                  v-tooltip="t('plugins.helmError')"
+                  v-clean-tooltip="t('plugins.helmError')"
                   class="plugin-error"
                 >
                   <i class="icon icon-warning" />

package/pages/home.vue

@@ -406,7 +406,7 @@ export default {
                       </span>
                       <i
                         v-if="row.unavailableMachines"
-                        v-tooltip="row.unavailableMachines"
+                        v-clean-tooltip="row.unavailableMachines"
                         class="conditions-alert-icon icon-alert icon"
                       />
                     </div>

package/pkg/vue.config.js

@@ -82,6 +82,7 @@ module.exports = function(dir) {
       // These modules will be externalised and not included with the build of a package library
       // This helps reduce the package size, but these dependencies must be provided by the hosting application
       config.externals = {
+        jquery:    '$',
         jszip:     '__jszip',
         'js-yaml': '__jsyaml'
       };

package/plugins/clean-html-directive.js

@@ -17,7 +17,7 @@ const ALLOWED_TAGS = [
   'strong',
 ];
 
-const purifyHTML = value => DOMPurify.sanitize(value, { ALLOWED_TAGS });
+export const purifyHTML = value => DOMPurify.sanitize(value, { ALLOWED_TAGS });
 
 export const cleanHtmlDirective = {
   inserted(el, binding) {

package/plugins/clean-tooltip-directive.js

@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import { VTooltip } from 'v-tooltip';
+import { purifyHTML } from './clean-html-directive';
+
+function purifyContent(value) {
+  const type = typeof value;
+
+  if (type === 'string') {
+    return purifyHTML(value);
+  } else if (value && type === 'object' && typeof value.content === 'string') {
+    return { ...value, content: purifyHTML(value.content) };
+  } else {
+    return value;
+  }
+}
+
+function bind(el, { value, oldValue, modifiers }) {
+  const purifiedValue = purifyContent(value);
+
+  VTooltip.bind(
+    el,
+    {
+      value: purifiedValue, oldValue, modifiers
+    });
+}
+
+const VCleanTooltip = {
+  ...VTooltip,
+  bind,
+  update: bind,
+};
+
+Vue.directive('clean-tooltip', VCleanTooltip);

package/plugins/dashboard-store/actions.js

@@ -317,13 +317,15 @@ export default {
 
     // 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', {
+      const args = {
         type,
         revision:  out.revision,
         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,
-      });
+      };
+
+      dispatch('watch', args);
     }
 
     const all = getters.all(type);

package/plugins/dashboard-store/getters.js

@@ -274,6 +274,12 @@ export default {
     return false;
   },
 
+  haveNamespace: (state, getters) => (type) => {
+    type = getters.normalizeType(type);
+
+    return state.types[type]?.haveNamespace || null;
+  },
+
   haveSelector: (state, getters) => (type, selector) => {
     type = getters.normalizeType(type);
     const entry = state.types[type];

package/plugins/dashboard-store/mutations.js

@@ -209,9 +209,9 @@ export function batchChanges(state, { ctx, batch }) {
     const removeAtIndexes = [];
 
     // looping through the batch, executing changes, deferring creates and removes since they change the array length
-    Object.keys(batch[normalizedType]).forEach((id) => {
+    Object.keys(combinedBatch[normalizedType]).forEach((id) => {
       const index = typeCacheIndexMap[id];
-      const resource = batch[normalizedType][id];
+      const resource = combinedBatch[normalizedType][id];
 
       // an empty resource passed into batch changes is how we'll signal which ones to delete
       if (Object.keys(resource).length === 0 && index !== undefined) {

package/plugins/plugin.js

@@ -40,7 +40,12 @@ export default async function(context) {
         });
       }
     } catch (e) {
-      console.error('Could not load UI Plugin list', e); // eslint-disable-line no-console
+      if (e?.code === 404) {
+        // Not found, so extensions operator probably not installed
+        console.log('Could not load UI Extensions list (Extensions Operator may not be installed)'); // eslint-disable-line no-console
+      } else {
+        console.error('Could not load UI Extensions list', e); // eslint-disable-line no-console
+      }
     }
 
     // Load all of the plugins

package/plugins/steve/actions.js

@@ -11,7 +11,7 @@ import jsyaml from 'js-yaml';
 
 export default {
 
-  // Need to override this, so that thhe 'this' context is correct (this class not the base class)
+  // Need to override this, so that the 'this' context is correct (this class not the base class)
   async loadSchemas(ctx, watch = true) {
     return await loadSchemas(ctx, watch);
   },

package/plugins/steve/getters.js

@@ -8,6 +8,7 @@ import HybridModel, { cleanHybridResources } from './hybrid-class';
 import NormanModel from './norman-class';
 import { urlFor } from '@shell/plugins/dashboard-store/getters';
 import { normalizeType } from '@shell/plugins/dashboard-store/normalize';
+import pAndNFiltering from '@shell/utils/projectAndNamespaceFiltering.utils';
 
 export const STEVE_MODEL_TYPES = {
   NORMAN:  'norman',
@@ -42,6 +43,15 @@ export default {
         });
       });
     }
+
+    // `opt.namespaced` is either
+    // - a string representing a single namespace - add restriction to the url
+    // - an array of namespaces or projects - add restriction as a param
+    const namespaceProjectFilter = pAndNFiltering.checkAndCreateParam(opt);
+
+    if (namespaceProjectFilter) {
+      url += `${ (url.includes('?') ? '&' : '?') + namespaceProjectFilter }`;
+    }
     // End: Filter
 
     // Limit
@@ -72,12 +82,13 @@ export default {
   urlFor: (state, getters) => (type, id, opt) => {
     let url = urlFor(state, getters)(type, id, opt);
 
-    if (opt.namespaced) {
+    // `namespaced` is either
+    // - a string representing a single namespace - add restriction to the url
+    // - an array of namespaces or projects - add restriction as a param
+    if (opt.namespaced && !pAndNFiltering.isApplicable(opt)) {
       const parts = url.split('/');
 
       url = `${ parts.join('/') }/${ opt.namespaced }`;
-
-      return url;
     }
 
     return url;