@rancher/shell 3.0.1-rc.4 → 3.0.1

package/config/pagination-table-headers.js

@@ -17,8 +17,8 @@ export const STEVE_ID_COL = {
   name:     'steve-id',
   labelKey: 'tableHeaders.id',
   value:    'id',
-  sort:     false, // sort:     ['id'], // Pending API support
-  search:   false, // search:   'id', // Pending API support
+  sort:     ['id'],
+  search:   'id',
 };
 
 export const STEVE_STATE_COL = {
@@ -26,8 +26,8 @@ export const STEVE_STATE_COL = {
   // Note, we're show the 'state' as per model, not the 'metadata.state.name' that's available in the model to remotely sort/filter
   // Need to investigate whether we should 'dumb down' the state we show to the native one (tracked via https://github.com/rancher/dashboard/issues/8527)
   // This means we'll show something different to what we sort and filter on.
-  sort:   false, // ['metadata.state.name'], // Pending API support
-  search: false, // 'metadata.state.name', // Pending API support
+  sort:   ['metadata.state.name'],
+  search: 'metadata.state.name',
 };
 
 export const STEVE_AGE_COL = {

package/config/product/explorer.js

@@ -9,6 +9,7 @@ import {
   NORMAN,
   SNAPSHOT,
   VIRTUAL_TYPES,
+  CAPI,
 } from '@shell/config/types';
 
 import {
@@ -60,6 +61,7 @@ export function init(store) {
       [MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING]: 'management',
       [NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING]:     'rancher',
       [NORMAN.PROJECT_ROLE_TEMPLATE_BINDING]:     'rancher',
+      [CAPI.RANCHER_CLUSTER]:                     'management',
     }
   });
 

package/config/router/routes.js

@@ -5,7 +5,7 @@ import { CAPI, MANAGEMENT, BACKUP_RESTORE, CIS } from '@shell/config/types';
 import { NAME as AUTH } from '@shell/config/product/auth';
 
 // All these imports are related to the install-redirect.js navigation guard.
-import { installRedirectRouteMeta } from 'config/router/navigation-guards/install-redirect';
+import { installRedirectRouteMeta } from '@shell/config/router/navigation-guards/install-redirect';
 import { NAME as BACKUP_NAME, CHART_NAME as BACKUP_CHART_NAME } from '@shell/config/product/backup';
 import { NAME as CIS_NAME, CHART_NAME as CIS_CHART_NAME } from '@shell/config/product/cis';
 import { NAME as GATEKEEPER_NAME, CHART_NAME as GATEKEEPER_CHART_NAME } from '@shell/config/product/gatekeeper';

package/config/settings.ts

@@ -1,6 +1,7 @@
 // Settings
 import { GC_DEFAULTS, GC_PREFERENCES } from '@shell/utils/gc/gc-types';
 import { PaginationSettings } from '@shell/types/resources/settings';
+import { CAPI, MANAGEMENT } from '@shell/config/types';
 
 interface GlobalSettingRuleset {
   name: string,
@@ -253,8 +254,19 @@ export const DEFAULT_PERF_SETTING: PerfSettings = {
             generic: true,
           }
         }
+      },
+      management: {
+        resources: {
+          enableAll:  false,
+          enableSome: {
+            enabled: [
+              { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar'] },
+              { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
+            ],
+            generic: false,
+          }
+        }
       }
     }
   }
-
 };

package/core/plugin.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { RouteRecordRaw } from 'vue-router';
 import { DSL as STORE_DSL } from '@shell/store/type-map';
+import { _DETAIL } from '@shell/config/query-params';
 import {
   CoreStoreInit,
   Action,
@@ -11,7 +12,7 @@ import {
   IPlugin,
   LocationConfig,
   ExtensionPoint,
-
+  TabLocation,
   PluginRouteRecordRaw, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
@@ -162,6 +163,12 @@ export class Plugin implements IPlugin {
    * Adds a tab to the UI
    */
   addTab(where: string, when: LocationConfig | string, tab: Tab): void {
+    // tackling https://github.com/rancher/dashboard/issues/11122, we don't want the tab to added in _EDIT view, unless overriden
+    // on extensions side we won't document the mode param for this extension point
+    if (where === TabLocation.RESOURCE_DETAIL && (typeof when === 'object' && !when.mode)) {
+      when.mode = [_DETAIL];
+    }
+
     this._addUIConfig(ExtensionPoint.TAB, where, when, this._createAsyncComponent(tab));
   }
 

package/core/types-provisioning.ts

@@ -106,6 +106,11 @@ export interface IClusterProvisioner {
    */
   disabled?: boolean;
 
+  /**
+   * Hide the cluster provider card
+   */
+  hidden?: boolean;
+
   /**
    * Custom Dashboard route to navigate to when the cluster provider card is clicked
    */

package/core/types.ts

@@ -237,6 +237,16 @@ export interface ProductOptions {
    */
   to?: PluginRouteRecordRaw;
 
+  /**
+   * Alternative to the icon property. Uses require
+   */
+  svg?: Function;
+
+  /**
+   * Product name
+   */
+  name?: string;
+
   /**
    * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
    */
@@ -373,10 +383,25 @@ export interface ConfigureTypeOptions {
 }
 
 export interface ConfigureVirtualTypeOptions extends ConfigureTypeOptions {
+  /**
+   * Only load the product if the type is present
+   */
+  ifHave?: string;
+
+  /**
+   * Only load the product if the type is present
+   */
+  ifHaveType?: string | RegExp | Object;
+
+  /**
+   * The label that this type should display
+   */
+  label?: string;
+
   /**
    * The translation key displayed anywhere this type is referenced
    */
-  labelKey: string;
+  labelKey?: string;
 
   /**
    * An identifier that should be unique across all types

package/dialog/DrainNode.vue

@@ -146,7 +146,7 @@ export default {
       <div class="pl-10 pr-10">
         <div>
           <RadioGroup
-            v-model="body.deleteLocalData"
+            v-model:value="body.deleteLocalData"
             name="deleteLocalData"
             :options="radioOptions"
             :row="true"
@@ -157,7 +157,7 @@ export default {
             </template>
           </RadioGroup>
           <RadioGroup
-            v-model="body.force"
+            v-model:value="body.force"
             name="force"
             :options="radioOptions"
             :row="true"
@@ -168,7 +168,7 @@ export default {
             </template>
           </RadioGroup>
           <RadioGroup
-            v-model="gracePeriod"
+            v-model:value="gracePeriod"
             name="gracePeriod"
             :options="gracePeriodOptions"
             class="mb-15"
@@ -178,7 +178,7 @@ export default {
             </template>
           </RadioGroup>
           <UnitInput
-            v-model="body.gracePeriod"
+            v-model:value="body.gracePeriod"
             :mode="gracePeriod ? EDIT : VIEW"
             type="number"
             min="1"
@@ -187,7 +187,7 @@ export default {
             class="mb-10"
           />
           <RadioGroup
-            v-model="timeout"
+            v-model:value="timeout"
             name="timeout"
             :options="timeoutOptions"
             class="mb-15"
@@ -197,7 +197,7 @@ export default {
             </template>
           </RadioGroup>
           <UnitInput
-            v-model="body.timeout"
+            v-model:value="body.timeout"
             :mode="timeout ? EDIT : VIEW"
             type="number"
             min="1"

package/edit/catalog.cattle.io.clusterrepo.vue

@@ -9,6 +9,7 @@ import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthS
 import InfoBox from '@shell/components/InfoBox';
 import { Checkbox } from '@components/Form/Checkbox';
 import { MANAGEMENT, NAMESPACE, CLUSTER_REPO_TYPES } from '@shell/config/types';
+import UnitInput from '@shell/components/form/UnitInput.vue';
 
 export default {
   name: 'CruCatalogRepo',
@@ -23,7 +24,8 @@ export default {
     Labels,
     SelectOrCreateAuthSecret,
     InfoBox,
-    Checkbox
+    Checkbox,
+    UnitInput
   },
 
   mixins: [CreateEditView],
@@ -83,7 +85,7 @@ export default {
         this.value.spec['exponentialBackOffValues'] = {};
       }
       // when user removes the value we remove the key too, backend will set the default value
-      if (newVal === '') {
+      if (newVal === '' || newVal === null) {
         delete this.value.spec.exponentialBackOffValues[key];
 
         return;
@@ -91,15 +93,27 @@ export default {
 
       this.value.spec.exponentialBackOffValues[key] = Number(newVal);
     },
+    updateRefreshInterval(newVal) {
+      // when user removes the value we don't send refreshInterval along with the payload
+      if (newVal === null) {
+        delete this.value.spec.refreshInterval;
+
+        return;
+      }
+
+      this.value.spec.refreshInterval = newVal;
+    },
     resetGitRepoValues() {
       delete this.value.spec['gitRepo'];
       delete this.value.spec['gitBranch'];
+      delete this.value.spec['refreshInterval'];
     },
     resetOciValues() {
       delete this.value.spec['url'];
       delete this.value.spec['insecurePlainHttp'];
       delete this.value.spec['insecureSkipTLSVerify'];
       delete this.value.spec['caBundle'];
+      delete this.value.spec['refreshInterval'];
       delete this.value.spec['exponentialBackOffValues'];
       this.ociMinWait = undefined;
       this.ociMaxWait = undefined;
@@ -139,55 +153,80 @@ export default {
       </div>
     </div>
 
-    <div
-      v-if="clusterRepoType === CLUSTER_REPO_TYPES.GIT_REPO"
-      class="row mb-10"
+    <InfoBox
+      v-if="clusterRepoType === CLUSTER_REPO_TYPES.OCI_URL"
+      class="p-10"
     >
-      <div class="col span-6">
+      {{ t('catalog.repo.oci.info', null, true) }}
+    </InfoBox>
+
+    <div class="row mb-10">
+      <template v-if="clusterRepoType === CLUSTER_REPO_TYPES.GIT_REPO">
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value.trim="value.spec.gitRepo"
+            :required="true"
+            :label="t('catalog.repo.gitRepo.label')"
+            :placeholder="t('catalog.repo.gitRepo.placeholder', null, true)"
+            :mode="mode"
+            data-testid="clusterrepo-git-repo-input"
+          />
+        </div>
+        <div class="col span-3">
+          <LabeledInput
+            v-model:value.trim="value.spec.gitBranch"
+            :sub-label="!value.spec.gitBranch ? t('catalog.repo.gitBranch.defaultMessage', null, true) : undefined"
+            :label="t('catalog.repo.gitBranch.label')"
+            :placeholder="t('catalog.repo.gitBranch.placeholder', null, true)"
+            :mode="mode"
+            data-testid="clusterrepo-git-branch-input"
+          />
+        </div>
+      </template>
+
+      <template v-else-if="clusterRepoType === CLUSTER_REPO_TYPES.OCI_URL">
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value.trim="value.spec.url"
+            :required="true"
+            :label="t('catalog.repo.oci.urlLabel')"
+            :placeholder="t('catalog.repo.oci.placeholder', null, true)"
+            :mode="mode"
+            data-testid="clusterrepo-oci-url-input"
+          />
+        </div>
+      </template>
+
+      <div
+        v-else
+        class="col span-6"
+      >
         <LabeledInput
-          v-model:value.trim="value.spec.gitRepo"
+          v-model:value.trim="value.spec.url"
           :required="true"
-          :label="t('catalog.repo.gitRepo.label')"
-          :placeholder="t('catalog.repo.gitRepo.placeholder', null, true)"
+          :label="t('catalog.repo.url.label')"
+          :placeholder="t('catalog.repo.url.placeholder', null, true)"
           :mode="mode"
-          data-testid="clusterrepo-git-repo-input"
+          data-testid="clusterrepo-helm-url-input"
         />
       </div>
-      <div class="col span-6">
-        <LabeledInput
-          v-model:value.trim="value.spec.gitBranch"
-          :sub-label="!value.spec.gitBranch ? t('catalog.repo.gitBranch.defaultMessage', null, true) : undefined"
-          :label="t('catalog.repo.gitBranch.label')"
-          :placeholder="t('catalog.repo.gitBranch.placeholder', null, true)"
+
+      <div
+        class="col span-3"
+        data-testid="clusterrepo-refresh-interval"
+      >
+        <UnitInput
+          v-model:value.trim="value.spec.refreshInterval"
+          :label="t('catalog.repo.refreshInterval.label')"
           :mode="mode"
-          data-testid="clusterrepo-git-branch-input"
+          min="0"
+          :suffix="t('unit.hour', { count: value.spec.refreshInterval })"
+          :placeholder="t('catalog.repo.refreshInterval.placeholder', { hours: clusterRepoType === CLUSTER_REPO_TYPES.OCI_URL ? 24 : 6 })"
+          @update:value="updateRefreshInterval($event)"
         />
       </div>
     </div>
 
-    <div v-else-if="clusterRepoType === CLUSTER_REPO_TYPES.OCI_URL">
-      <InfoBox class="p-10">
-        {{ t('catalog.repo.oci.info', null, true) }}
-      </InfoBox>
-      <LabeledInput
-        v-model:value.trim="value.spec.url"
-        :required="true"
-        :label="t('catalog.repo.oci.urlLabel')"
-        :placeholder="t('catalog.repo.oci.placeholder', null, true)"
-        :mode="mode"
-        data-testid="clusterrepo-oci-url-input"
-      />
-    </div>
-
-    <LabeledInput
-      v-else
-      v-model:value.trim="value.spec.url"
-      :required="true"
-      :label="t('catalog.repo.url.label')"
-      :placeholder="t('catalog.repo.url.placeholder', null, true)"
-      :mode="mode"
-      data-testid="clusterrepo-helm-url-input"
-    />
     <SelectOrCreateAuthSecret
       v-model:value="value.spec.clientSecret"
       :mode="mode"
@@ -231,28 +270,32 @@ export default {
       <h4 class="mb-10 mt-20">
         {{ t('catalog.repo.oci.exponentialBackOff.label') }}
       </h4>
-      <div class="row mb-10 mt-10">
-        <div class="col span-4">
-          <LabeledInput
+      <div class="row mb-40 mt-10">
+        <div
+          class="col span-4"
+          data-testid="clusterrepo-oci-min-wait-input"
+        >
+          <UnitInput
             v-model:value.trim="ociMinWait"
             :label="t('catalog.repo.oci.exponentialBackOff.minWait.label')"
-            :placeholder="!ociMinWait ? t('catalog.repo.oci.exponentialBackOff.minWait.placeholder') : undefined"
+            :placeholder="t('catalog.repo.oci.exponentialBackOff.minWait.placeholder')"
             :mode="mode"
-            type="number"
             min="1"
-            data-testid="clusterrepo-oci-min-wait-input"
+            :suffix="t('suffix.seconds', { count: ociMinWait })"
             @update:value="updateExponentialBackOffValues('minWait', $event)"
           />
         </div>
-        <div class="col span-4">
-          <LabeledInput
+        <div
+          class="col span-4"
+          data-testid="clusterrepo-oci-max-wait-input"
+        >
+          <UnitInput
             v-model:value.trim="ociMaxWait"
             :label="t('catalog.repo.oci.exponentialBackOff.maxWait.label')"
-            :placeholder="!ociMaxWait ? t('catalog.repo.oci.exponentialBackOff.maxWait.placeholder') : undefined"
+            :placeholder="t('catalog.repo.oci.exponentialBackOff.maxWait.placeholder')"
             :mode="mode"
-            type="number"
             min="1"
-            data-testid="clusterrepo-oci-max-wait-input"
+            :suffix="t('suffix.seconds', { count: ociMaxWait })"
             @update:value="updateExponentialBackOffValues('maxWait', $event)"
           />
         </div>
@@ -260,7 +303,7 @@ export default {
           <LabeledInput
             v-model:value.trim="ociMaxRetries"
             :label="t('catalog.repo.oci.exponentialBackOff.maxRetries.label')"
-            :placeholder="!ociMaxRetries ? t('catalog.repo.oci.exponentialBackOff.maxRetries.placeholder') : undefined"
+            :placeholder="t('catalog.repo.oci.exponentialBackOff.maxRetries.placeholder')"
             :mode="mode"
             type="number"
             min="0"

package/edit/provisioning.cattle.io.cluster/index.vue

@@ -404,7 +404,8 @@ export default {
           disabled:    ext.disabled || false,
           link:        ext.link,
           tag:         ext.tag,
-          component:   ext.component
+          component:   ext.component,
+          hidden:      ext.hidden,
         };
 
         out.push(subtype);
@@ -449,10 +450,14 @@ export default {
       }
     },
 
+    filteredSubTypes() {
+      return this.subTypes.filter((subtype) => !subtype.hidden);
+    },
+
     groupedSubTypes() {
       const out = {};
 
-      for ( const row of this.subTypes ) {
+      for ( const row of this.filteredSubTypes ) {
         const name = row.group;
         let entry = out[name];
 
@@ -623,7 +628,7 @@ export default {
       <div
         v-for="(obj, i) in groupedSubTypes"
         :key="i"
-        class="mb-20"
+        :class="{'mt-5': i === 0, 'mt-20': i !== 0 }"
         style="width: 100%;"
       >
         <h4>

package/list/node.vue

@@ -21,6 +21,7 @@ import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
 
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import { mapGetters } from 'vuex';
+import { FetchPageSecondaryResourcesOpts } from 'components/PaginatedResourceTable.vue';
 
 export default defineComponent({
   name:       'ListNode',
@@ -36,10 +37,12 @@ export default defineComponent({
       type:     String,
       required: true,
     },
+
     schema: {
       type:     Object,
       required: true,
     },
+
     useQueryParamsForSimpleFiltering: {
       type:    Boolean,
       default: false
@@ -209,8 +212,8 @@ export default defineComponent({
      *
      * So when we have a page.... use those entries as filters when fetching the other resources
      */
-    async fetchPageSecondaryResources(force = false) {
-      if (!this.rows?.length) {
+    async fetchPageSecondaryResources({ canPaginate, force, page }: FetchPageSecondaryResourcesOpts) {
+      if (!page?.length) {
         return;
       }
 
@@ -220,7 +223,7 @@ export default defineComponent({
         const opt: ActionFindPageArgs = {
           force,
           pagination: new FilterArgs({
-            filters: PaginationParamFilter.createMultipleFields(this.rows.map((r: any) => new PaginationFilterField({
+            filters: PaginationParamFilter.createMultipleFields(page.map((r: any) => new PaginationFilterField({
               field: 'status.nodeName',
               value: r.id
             }))),
@@ -242,7 +245,7 @@ export default defineComponent({
             namespaced: namespace,
             pagination: new FilterArgs({
               filters: PaginationParamFilter.createMultipleFields(
-                this.rows.reduce((res: PaginationFilterField[], r: any ) => {
+                page.reduce((res: PaginationFilterField[], r: any ) => {
                   const name = r.metadata?.annotations?.[CAPI_ANNOTATIONS.MACHINE_NAME];
 
                   if (name) {
@@ -268,7 +271,7 @@ export default defineComponent({
           force,
           pagination: new FilterArgs({
             filters: PaginationParamFilter.createMultipleFields(
-              this.rows.map((r: any) => new PaginationFilterField({
+              page.map((r: any) => new PaginationFilterField({
                 field: 'spec.nodeName',
                 value: r.id,
               }))

package/mixins/resource-fetch-api-pagination.js

@@ -13,6 +13,21 @@ import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
  */
 export default {
 
+  props: {
+    namespaced: {
+      type:    Boolean,
+      default: null, // Automatic from schema
+    },
+
+    /**
+     * Where in the ui this mixin is used. For instance the home page cluster list would be `home`
+     */
+    context: {
+      type:    String,
+      default: null,
+    },
+  },
+
   data() {
     return {
       forceUpdateLiveAndDelayed: 0,
@@ -68,7 +83,7 @@ export default {
     },
 
     namespaceFilterChanged(neu) {
-      if (!this.canPaginate || !this.schema?.attributes?.namespaced) {
+      if (!this.canPaginate || !this.isNamespaced) {
         return;
       }
 
@@ -166,7 +181,16 @@ export default {
         return;
       }
 
-      return this.resource && this.$store.getters[`${ this.currentProduct?.inStore }/paginationEnabled`]?.(this.resource.id || this.resource);
+      if (!this.resource) {
+        return false;
+      }
+
+      const args = {
+        id:      this.resource.id || this.resource,
+        context: this.context,
+      };
+
+      return this.resource && this.$store.getters[`${ this.inStore }/paginationEnabled`]?.(args);
     },
 
     paginationResult() {
@@ -182,7 +206,7 @@ export default {
         return;
       }
 
-      return this.$store.getters[`${ this.currentProduct?.inStore }/havePage`](this.resource);
+      return this.$store.getters[`${ this.inStore }/havePage`](this.resource);
     },
 
     /**
@@ -197,6 +221,15 @@ export default {
       */
     showDynamicRancherNamespaces() {
       return this.$store.getters['prefs/get'](ALL_NAMESPACES);
+    },
+
+    isNamespaced() {
+      if (this.namespaced !== null) { // null is the default value
+        // This is an override, but only if it's set
+        return !!this.namespaced;
+      }
+
+      return this.schema?.attributes?.namespaced;
     }
   },
 
@@ -221,7 +254,7 @@ export default {
     namespaceFilters: {
       immediate: true,
       async handler(neu, old) {
-        if (!this.canPaginate || !this.schema?.attributes?.namespaced) {
+        if (!this.canPaginate || !this.isNamespaced) {
           return;
         }
 
@@ -298,7 +331,9 @@ export default {
         return;
       }
 
-      await this.fetchPageSecondaryResources();
+      await this.fetchPageSecondaryResources({
+        canPaginate: this.canPaginate, force: false, page: this.rows, pagResult: this.paginationResult
+      });
     }
   },
 };