@rancher/shell 0.5.3 → 2.0.0

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

@@ -3,13 +3,13 @@ import { NAME as SETTINGS } from '@shell/config/product/settings';
 import { MANAGEMENT } from '@shell/config/types';
 
 export default {
-  middleware({ redirect, route, store } ) {
-    const hasSettings = !!store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
+  beforeCreate() {
+    const hasSettings = !!this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
 
-    return redirect({
+    return this.$router.replace({
       name:   'c-cluster-product-resource',
       params: {
-        ...route.params,
+        ...this.$route.params,
         product:  SETTINGS,
         // Will have one or t'other
         resource: hasSettings ? MANAGEMENT.SETTING : MANAGEMENT.FEATURE,

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

@@ -10,7 +10,8 @@ import KeyValue from '@shell/components/form/KeyValue';
 import { mapGetters } from 'vuex';
 import { isRancherPrime } from '@shell/config/version';
 import DefaultLinksEditor from './DefaultLinksEditor';
-import { CUSTOM_LINKS_VERSION, fetchLinks } from '@shell/config/home-links';
+import { CUSTOM_LINKS_COLLECTIVE_VERSION, fetchLinks } from '@shell/config/home-links';
+import TabTitle from '@shell/components/TabTitle';
 
 export default {
   components: {
@@ -19,6 +20,7 @@ export default {
     AsyncButton,
     Banner,
     DefaultLinksEditor,
+    TabTitle
   },
   async fetch() {
     this.value = await fetchLinks(this.$store, this.hasSupport, false, (str) => this.t(str));
@@ -45,7 +47,7 @@ export default {
 
     allValues() {
       return {
-        version:  CUSTOM_LINKS_VERSION,
+        version:  CUSTOM_LINKS_COLLECTIVE_VERSION,
         defaults: this.value.defaults.filter((obj) => obj.enabled).map((obj) => obj.key),
         custom:   this.value.custom
       };
@@ -88,7 +90,7 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <h1 class="mb-20">
-      {{ t("customLinks.label") }}
+      <TabTitle>{{ t("customLinks.label") }}</TabTitle>
     </h1>
     <div>
       <label class="text-label">

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

@@ -8,17 +8,21 @@ import { MANAGEMENT } from '@shell/config/types';
 import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import UnitInput from '@shell/components/form/UnitInput';
+import { STEVE_CACHE } from '@shell/store/features';
+import { NAME as SETTING_PRODUCT } from '@shell/config/product/settings';
 
 const incompatible = {
-  incrementalLoading: ['forceNsFilterV2'],
-  manualRefresh:      ['forceNsFilterV2'],
+  incrementalLoading: ['forceNsFilterV2', 'serverPagination'],
+  manualRefresh:      ['forceNsFilterV2', 'serverPagination'],
   forceNsFilterV2:    ['incrementalLoading', 'manualRefresh'],
+  serverPagination:   ['incrementalLoading', 'manualRefresh'],
 };
 
 const l10n = {
   incrementalLoading: 'incrementalLoad',
   manualRefresh:      'manualRefresh',
   forceNsFilterV2:    'nsFiltering',
+  serverPagination:   'serverPagination'
 };
 
 export default {
@@ -64,6 +68,13 @@ export default {
       errors:                     [],
       gcStartedEnabled:           null,
       isInactivityThresholdValid: false,
+      ffUrl:                      this.$router.resolve({
+        name:   'c-cluster-product-resource',
+        params: {
+          product:  SETTING_PRODUCT,
+          resource: MANAGEMENT.FEATURE
+        }
+      }).href
     };
   },
 
@@ -76,6 +87,33 @@ export default {
 
     canSave() {
       return this.value.inactivity.enabled ? this.isInactivityThresholdValid : true;
+    },
+
+    steveCacheEnabled() {
+      return this.$store.getters['features/get'](STEVE_CACHE);
+    },
+
+    steveCacheApplicableResources() {
+      const storeResources = [];
+
+      Object.entries(this.value.serverPagination.stores).forEach(([store, settings]) => {
+        const resources = [];
+
+        if (settings.resources.enableAll) {
+          resources.push(this.t('performance.serverPagination.resources.all'));
+        } else {
+          settings.resources.enableSome.enabled.forEach((resource) => {
+            resources.push(resource);
+          });
+          if (settings.resources.enableSome.generic) {
+            resources.push(this.t('performance.serverPagination.resources.generic', {}, true));
+          }
+        }
+
+        storeResources.push(`${ store }: ${ resources.join(', ') }`);
+      });
+
+      return storeResources.join('. ');
     }
   },
 
@@ -151,6 +189,7 @@ export default {
   },
 };
 </script>
+
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
@@ -159,6 +198,35 @@ export default {
     </h1>
     <div>
       <div class="ui-perf-setting">
+        <!-- Server Side Pagination -->
+        <div class="mt-40">
+          <h2>{{ t('performance.serverPagination.label') }}</h2>
+          <p>{{ t('performance.serverPagination.description') }}</p>
+          <Banner
+            color="error"
+            label-key="performance.experimental"
+          />
+          <Banner
+            v-if="!steveCacheEnabled"
+            v-clean-html="t(`performance.serverPagination.featureFlag`, { ffUrl }, true)"
+            color="warning"
+          />
+          <Checkbox
+            v-model="value.serverPagination.enabled"
+            :mode="mode"
+            :label="t('performance.serverPagination.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+            :disabled="(!steveCacheEnabled && !value.serverPagination.enabled)"
+            @input="compatibleWarning('serverPagination', $event)"
+          />
+          <p :class="{ 'text-muted': !value.serverPagination.enabled }">
+            {{ t('performance.serverPagination.applicable') }}
+          </p>
+          <p :class="{ 'text-muted': !value.serverPagination.enabled }">
+            {{ steveCacheApplicableResources }}
+          </p>
+        </div>
         <!-- Inactivity -->
         <div class="mt-20">
           <h2>{{ t('performance.inactivity.title') }}</h2>
@@ -391,6 +459,7 @@ export default {
     </div>
   </div>
 </template>
+
 <style scoped lang='scss'>
 .overlay {
   width: 100%;

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

@@ -46,7 +46,8 @@ export default {
           url:    UI_PLUGINS_PARTNERS_REPO_URL,
           branch: UI_PLUGINS_PARTNERS_REPO_BRANCH,
         }
-      }
+      },
+      isDialogActive: false,
     };
   },
 
@@ -65,7 +66,7 @@ export default {
         official: isRancherPrime() && !this.hasRancherUIPluginsRepo,
         partners: !this.hasRancherUIPartnersPluginsRepo,
       };
-      this.$modal.show('add-extensions-repos');
+      this.isDialogActive = true;
     },
 
     async doAddRepos(btnCb) {
@@ -108,11 +109,13 @@ export default {
 </script>
 <template>
   <Dialog
+    v-if="isDialogActive"
     name="add-extensions-repos"
     :title="t('plugins.addRepos.title')"
     mode="add"
     data-testid="add-extensions-repos-modal"
     @okay="doAddRepos"
+    @closed="isDialogActive = false"
   >
     <template>
       <p class="mb-20">

package/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue

@@ -10,6 +10,7 @@ import { allHash } from '@shell/utils/promise';
 import ResourceManager from '@shell/mixins/resource-manager';
 
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Loading from '@shell/components/Loading.vue';
 import { Banner } from '@components/Banner';
@@ -98,7 +99,7 @@ const initialState = () => {
 
 export default {
   components: {
-    AsyncButton, Banner, LabeledInput, Loading, LabeledSelect
+    AsyncButton, Banner, LabeledInput, Loading, LabeledSelect, AppModal,
   },
 
   mixins: [ResourceManager],
@@ -123,7 +124,8 @@ export default {
   data() {
     return {
       ...initialState(),
-      secondaryResourceData: null
+      secondaryResourceData: null,
+      showModal:             false,
     };
   },
 
@@ -159,11 +161,11 @@ export default {
     },
 
     showDialog() {
-      this.$modal.show('catalogLoadDialog');
+      this.showModal = true;
     },
 
     closeDialog(result) {
-      this.$modal.hide('catalogLoadDialog');
+      this.showModal = false;
       this.$emit('closed', result);
 
       // Reset state
@@ -425,11 +427,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="catalogLoadDialog"
     height="auto"
     :scrollable="true"
-    @closed="closeDialog()"
+    @close="closeDialog()"
   >
     <Loading
       v-if="$fetchState.loading"
@@ -507,7 +510,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>

package/pages/c/_cluster/uiplugins/CatalogList/CatalogUninstallDialog.vue

@@ -6,9 +6,10 @@ import { UI_PLUGIN_LABELS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 import { allHash } from '@shell/utils/promise';
 
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
-  components: { AsyncButton },
+  components: { AsyncButton, AppModal },
 
   async fetch() {
     if ( this.$store.getters['management/schemaFor'](UI_PLUGIN) ) {
@@ -20,7 +21,7 @@ export default {
 
   data() {
     return {
-      catalog: undefined, busy: false, plugins: null
+      catalog: undefined, busy: false, plugins: null, showModal: false,
     };
   },
 
@@ -36,11 +37,11 @@ export default {
     showDialog(catalog) {
       this.catalog = catalog;
       this.busy = false;
-      this.$modal.show('uninstallCatalogDialog');
+      this.showModal = true;
     },
 
     closeDialog(result) {
-      this.$modal.hide('uninstallCatalogDialog');
+      this.showModal = false;
       this.$emit('closed', result);
 
       if ( result ) {
@@ -113,10 +114,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="uninstallCatalogDialog"
     height="auto"
     :scrollable="true"
+    @close="closeDialog(false)"
   >
     <div
       v-if="catalog"
@@ -148,7 +151,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>

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

@@ -1,5 +1,6 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal.vue';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import { UI_PLUGIN } from '@shell/config/types';
@@ -10,6 +11,7 @@ export default {
     AsyncButton,
     Checkbox,
     LabeledInput,
+    AppModal,
   },
 
   data() {
@@ -19,6 +21,7 @@ export default {
       persist:           false,
       canModifyName:     true,
       canModifyLocation: true,
+      showModal:         false,
     };
   },
 
@@ -50,10 +53,10 @@ export default {
 
   methods: {
     showDialog() {
-      this.$modal.show('developerInstallPluginDialog');
+      this.showModal = true;
     },
     closeDialog(result) {
-      this.$modal.hide('developerInstallPluginDialog');
+      this.showModal = false;
       this.$emit('closed', result);
     },
 
@@ -104,7 +107,8 @@ export default {
               metadata: {
                 developer: 'true',
                 direct:    'true'
-              }
+              },
+              noAuth: true
             }
           }
         });
@@ -142,10 +146,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="developerInstallPluginDialog"
     height="auto"
     :scrollable="true"
+    @close="closeDialog()"
   >
     <div class="plugin-install-dialog">
       <h4>
@@ -194,7 +200,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>

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

@@ -1,6 +1,7 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import AppModal from '@shell/components/AppModal.vue';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
@@ -13,6 +14,7 @@ export default {
     AsyncButton,
     Banner,
     LabeledSelect,
+    AppModal,
   },
 
   async fetch() {
@@ -31,6 +33,8 @@ export default {
       version:                '',
       update:                 false,
       mode:                   '',
+      showModal:              false,
+      chartVersionInfo:       null
     };
   },
 
@@ -63,6 +67,10 @@ export default {
 
     buttonMode() {
       return this.update ? 'update' : 'install';
+    },
+
+    chartVersionLoadsWithoutAuth() {
+      return this.chartVersionInfo?.values?.plugin?.noAuth;
     }
   },
 
@@ -101,11 +109,37 @@ export default {
 
       this.busy = false;
       this.update = mode !== 'install';
-      this.$modal.show('installPluginDialog');
+      this.showModal = true;
+    },
+
+    async loadVersionInfo() {
+      try {
+        this.busy = true;
+        const plugin = this.plugin;
+
+        // Find the version that the user wants to install
+        const version = plugin.versions?.find((v) => v.version === this.version);
+
+        if (!version) {
+          this.busy = false;
+
+          return;
+        }
+
+        this.chartVersionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
+          repoType:    version.repoType,
+          repoName:    version.repoName,
+          chartName:   plugin.chart.chartName,
+          versionName: this.version,
+        });
+      } catch (e) {
+      } finally {
+        this.busy = false;
+      }
     },
 
     closeDialog(result) {
-      this.$modal.hide('installPluginDialog');
+      this.showModal = false;
       this.$emit('closed', result);
     },
 
@@ -125,21 +159,9 @@ export default {
         return;
       }
 
+      const image = this.chartVersionInfo?.values?.image?.repository || '';
       // is the image used by the chart in the rancher org?
-      let isRancherImage = false;
-
-      try {
-        const chartVersionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
-          repoType:    version.repoType,
-          repoName:    version.repoName,
-          chartName:   plugin.chart.chartName,
-          versionName: this.version,
-        });
-
-        const image = chartVersionInfo?.values?.image?.repository || '';
-
-        isRancherImage = image.startsWith('rancher/');
-      } catch (e) {}
+      const isRancherImage = image.startsWith('rancher/');
 
       // See if there is already a plugin with this name
       let exists = false;
@@ -210,15 +232,23 @@ export default {
         this.closeDialog(plugin);
       }
     }
+  },
+  watch: {
+    version() {
+      this.chartVersionInfo = null;
+      this.loadVersionInfo();
+    }
   }
 };
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="installPluginDialog"
     height="auto"
     :scrollable="true"
+    @close="closeDialog(false)"
   >
     <div
       v-if="plugin"
@@ -232,6 +262,11 @@ export default {
           <p>
             {{ t(`plugins.${ mode }.prompt`) }}
           </p>
+          <Banner
+            v-if="chartVersionLoadsWithoutAuth"
+            color="warning"
+            :label="t('plugins.warnNoAuth')"
+          />
           <Banner
             v-if="!plugin.certified"
             color="warning"
@@ -266,7 +301,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>