@rancher/shell 1.2.0 → 2.0.0

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

@@ -0,0 +1,304 @@
+import { NAMESPACE_FILTER_NAMESPACED_YES, NAMESPACE_FILTER_NAMESPACED_NO, NAMESPACE_FILTER_ALL } from '@shell/utils/namespace-filter';
+import { NAMESPACE } from '@shell/config/types';
+import { ALL_NAMESPACES } from '@shell/store/prefs';
+import { mapGetters } from 'vuex';
+import { ResourceListComponentName } from '../components/ResourceList/resource-list.config';
+import paginationUtils from '@shell/utils/pagination-utils';
+import debounce from 'lodash/debounce';
+import { PaginationParamFilter, PaginationFilterField, PaginationArgs } from '@shell/types/store/pagination.types';
+import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
+
+/**
+ * Companion mixin used with `resource-fetch` for `ResourceList` to determine if the user needs to filter the list by a single namespace
+ */
+export default {
+
+  data() {
+    return {
+      forceUpdateLiveAndDelayed: 0,
+      /**
+       * This of type `OptPagination`
+       */
+      pPagination:               null,
+      // Avoid scenarios where namespace is updated just before other pagination changes come in
+      debouncedSetPagination:    debounce(this.setPagination, 50),
+
+      /**
+       * Apply these additional filters given the ns / project header selection
+       */
+      requestFilters: {
+        filters:              [],
+        projectsOrNamespaces: [],
+      },
+    };
+  },
+
+  methods: {
+    /**
+     * @param {PaginationArgs} pagination
+     */
+    setPagination(pagination) {
+      if (pagination) {
+        this.pPagination = pagination;
+      }
+    },
+
+    paginationChanged(event) {
+      const searchFilters = event.filter.searchQuery ? event.filter.searchFields.map((field) => new PaginationFilterField({
+        field,
+        value: event.filter.searchQuery,
+        exact: false,
+      })) : [];
+
+      const pagination = new PaginationArgs({
+        page:     event.page,
+        pageSize: event.perPage,
+        sort:     event.sort?.map((field) => ({
+          field,
+          asc: !event.descending
+        })),
+        projectsOrNamespaces: this.requestFilters.projectsOrNamespaces,
+        filters:              [
+          new PaginationParamFilter({ fields: searchFilters }),
+          ...this.requestFilters.filters, // Apply the additional filters. these aren't from the user but from ns filtering
+        ]
+      });
+
+      this.debouncedSetPagination(pagination);
+    },
+
+    namespaceFilterChanged(neu) {
+      if (!this.canPaginate || !this.schema?.attributes?.namespaced) {
+        return;
+      }
+
+      const {
+        projectsOrNamespaces,
+        filters
+      } = stevePaginationUtils.createParamsFromNsFilter({
+        allNamespaces:                this.$store.getters[`${ this.currentProduct?.inStore }/all`](NAMESPACE),
+        selection:                    neu,
+        isAllNamespaces:              this.isAllNamespaces,
+        isLocalCluster:               this.$store.getters['currentCluster'].isLocal,
+        showDynamicRancherNamespaces: this.showDynamicRancherNamespaces,
+        productHidesSystemNamespaces: this.productHidesSystemNamespaces,
+      });
+
+      this.requestFilters.filters = filters;
+      this.requestFilters.projectsOrNamespaces = projectsOrNamespaces;
+
+      // Kick off a change
+      if (this.pPagination) {
+        this.debouncedSetPagination({ ...this.pPagination });
+      }
+    },
+
+    /**
+     * @param {PaginationArgs} neu
+     * @param {PaginationArgs} old
+     */
+    paginationEqual(neu, old) {
+      if (!neu.page) {
+        // Not valid, count as not equal
+        return false;
+      }
+
+      if (paginationUtils.paginationEqual(neu, old)) {
+        return true;
+      }
+
+      return false;
+    }
+  },
+
+  computed: {
+    ...mapGetters(['currentProduct', 'isAllNamespaces']),
+
+    /**
+     * Why is this a specific getter and not not in mapGetters?
+     *
+     * Adding it to mapGetters means the kubewarden unit tests fail as they don't mock it....
+     */
+    namespaceFilters() {
+      return this.$store.getters['namespaceFilters'];
+    },
+
+    /**
+     * Does the user need to update the filter to supply valid options?
+     */
+    paginationNsFilterRequired() {
+      return this.canPaginate && !this.__validPaginationNsFilter;
+    },
+
+    /**
+     * Check if the Project/Namespace filter from the header contains a valid ns / project filter
+     */
+    __validPaginationNsFilter() {
+      return paginationUtils.validateNsProjectFilters(this.namespaceFilters);
+    },
+
+    /**
+     * ResourceList imports resource-fetch --> this mixin
+     * When there is no custom list this is fine (ResourceList with mixins --> ResourceTable)
+     * When there is a custom list there are two instances of this mixin (ResourceList with mixins --> CustomList with mixins --> ResourceTable)
+     * - In this scenario, reduce churn by exiting earlier if mixin is from parent ResourceList and leave work for CustomList mixins
+     */
+    isResourceList() {
+      return !!this.hasListComponent;
+    },
+
+    /**
+     * Is Pagination supported and has the table supplied pagination settings from the table?
+     */
+    pagination() {
+      if (this.isResourceList) {
+        return;
+      }
+
+      return this.canPaginate ? this.pPagination : '';
+    },
+
+    /**
+     * Should this list be paginated via API?
+     */
+    canPaginate() {
+      if (this.isResourceList) {
+        return;
+      }
+
+      return this.resource && this.$store.getters[`${ this.currentProduct?.inStore }/paginationEnabled`]?.(this.resource.id || this.resource);
+    },
+
+    paginationResult() {
+      if (this.isResourceList || !this.canPaginate) {
+        return;
+      }
+
+      return this.havePaginated?.result;
+    },
+
+    havePaginated() {
+      if (this.isResourceList) {
+        return;
+      }
+
+      return this.$store.getters[`${ this.currentProduct?.inStore }/havePage`](this.resource);
+    },
+
+    /**
+      * Links to ns.isSystem and covers things like ns with system annotation, hardcoded list, etc
+      */
+    productHidesSystemNamespaces() {
+      return this.currentProduct?.hideSystemResources;
+    },
+
+    /**
+      * Links to ns.isObscure and covers things like `c-`, `user-`, etc (see OBSCURE_NAMESPACE_PREFIX)
+      */
+    showDynamicRancherNamespaces() {
+      return this.$store.getters['prefs/get'](ALL_NAMESPACES);
+    }
+  },
+
+  watch: {
+    /**
+     * Monitor the rows to ensure deleting the last entry in a server-side paginated page doesn't
+     * result in an empty page
+     */
+    rows(neu) {
+      if (!this.canPaginate || !this.pagination || this.isResourceList) {
+        return;
+      }
+
+      if (this.pagination.page > 1 && neu.length === 0) {
+        this.setPagination({
+          ...this.pagination,
+          page: this.pagination.page - 1
+        });
+      }
+    },
+
+    namespaceFilters: {
+      immediate: true,
+      async handler(neu, old) {
+        if (!this.canPaginate || !this.schema?.attributes?.namespaced) {
+          return;
+        }
+
+        if (this.isResourceList) {
+          return;
+        }
+
+        // Transitioning from no ns filters to no ns filters should be avoided
+        const neuEmpty = !neu || neu.length === 0 || neu[0] === NAMESPACE_FILTER_ALL;
+        const oldEmpty = !old || old.length === 0 || old[0] === NAMESPACE_FILTER_ALL;
+
+        if (neuEmpty && oldEmpty) {
+          const allButHidingSystemResources = this.isAllNamespaces && (!this.showDynamicRancherNamespaces || this.productHidesSystemNamespaces);
+
+          // If we're showing all... and not hiding system or obscure ns then don't go through filter process
+          if (!allButHidingSystemResources) {
+            return;
+          }
+        }
+
+        // Transitioning to a ns filter that doesn't affect the list should be avoided
+        if (neu.length === 1) {
+          if ([NAMESPACE_FILTER_NAMESPACED_YES, NAMESPACE_FILTER_NAMESPACED_NO].includes(neu[0])) {
+            return;
+          }
+        }
+
+        this.namespaceFilterChanged(neu);
+      }
+    },
+
+    /**
+     * When a pagination is required and the user changes page / sort / filter, kick off a new set of API requests
+     *
+     * @param {StorePaginationResult} neu
+     * @param {StorePaginationResult} old
+     */
+    async pagination(neu, old) {
+      if (!this.canPaginate) {
+        return;
+      }
+
+      // ResourceList has two modes
+      // 1) ResourceList component handles API request to fetch resources
+      // 2) Custom list component handles API request to fetch resources
+      //
+      // This covers case 2, so ignore case 1
+      if (this.isResourceList) {
+        return;
+      }
+
+      if (neu && this.$options.name !== ResourceListComponentName && !!this.$fetch && !this.paginationEqual(neu, old)) {
+        await this.$fetch(false);
+        // Ensure any live/delayed columns get updated
+        this.forceUpdateLiveAndDelayed = new Date().getTime();
+      }
+    },
+
+    /**
+     * If the pagination result has changed fetch secondary resources
+     *
+     * Lists should implement fetchPageSecondaryResources to fetch them
+     *
+     * @param {StorePaginationResult} neu
+     * @param {StorePaginationResult} old
+     */
+    async paginationResult(neu, old) {
+      if (!this.fetchPageSecondaryResources || !neu ) { // || neu.timestamp === old?.timestamp
+        return;
+      }
+
+      if (neu.timestamp === old?.timestamp) {
+        // This occurs when the user returns to the page... and pagination hasn't actually changed
+        return;
+      }
+
+      await this.fetchPageSecondaryResources();
+    }
+  },
+};

package/mixins/resource-fetch-namespaced.js

@@ -1,7 +1,7 @@
 import { NAMESPACE_FILTER_NS_PREFIX, NAMESPACE_FILTER_P_PREFIX } from '@shell/utils/namespace-filter';
 import { mapGetters } from 'vuex';
 import { ResourceListComponentName } from '../components/ResourceList/resource-list.config';
-import pAndNFiltering from '@shell/utils/projectAndNamespaceFiltering.utils';
+import pAndNFiltering from '@shell/plugins/steve/projectAndNamespaceFiltering.utils';
 
 /**
  * Companion mixin used with `resource-fetch` for `ResourceList` to determine if the user needs to filter the list by a single namespace

package/mixins/resource-fetch.js

@@ -1,14 +1,19 @@
+import Vue from 'vue';
 import { mapGetters } from 'vuex';
 import { COUNT, MANAGEMENT } from '@shell/config/types';
 import { SETTING, DEFAULT_PERF_SETTING } from '@shell/config/settings';
 import ResourceFetchNamespaced from '@shell/mixins/resource-fetch-namespaced';
+import ResourceFetchApiPagination from '@shell/mixins/resource-fetch-api-pagination';
 
 // Number of pages to fetch when loading incrementally
 const PAGES = 4;
 
 export default {
 
-  mixins: [ResourceFetchNamespaced],
+  mixins: [
+    ResourceFetchNamespaced,
+    ResourceFetchApiPagination
+  ],
 
   data() {
     // fetching the settings related to manual refresh from global settings
@@ -38,8 +43,10 @@ export default {
       // incremental loading vars
       incremental:                false,
       fetchedResourceType:        [],
+      paginating:                 null,
     };
   },
+
   beforeDestroy() {
     // make sure this only runs once, for the initialized instance
     if (this.init) {
@@ -64,17 +71,26 @@ export default {
       }
     },
     loading() {
+      if (this.canPaginate) {
+        return this.paginating;
+      }
+
       return this.rows.length ? false : this.$fetchState.pending;
     },
   },
+
   watch: {
-    refreshFlag(neu) {
+    async refreshFlag(neu) {
       // this is where the data assignment will trigger the update of the list view...
       if (this.init && neu) {
-        this.$fetch();
+        await this.$fetch();
+        if (this.canPaginate && this.fetchPageSecondaryResources) {
+          this.fetchPageSecondaryResources(true);
+        }
       }
     }
   },
+
   methods: {
     // this defines all the flags needed for the mechanism
     // to work. They should be defined based on the main list view
@@ -109,6 +125,31 @@ export default {
         });
       }
 
+      const schema = this.$store.getters[`${ currStore }/schemaFor`](type);
+
+      if (this.canPaginate) {
+        if (!this.pagination) {
+          // This is the initial fetchType made when resource lists are created...
+          // when pagination is enabled we want to wait for the correct set of initial pagination settings to make the call
+          return;
+        }
+        const opt = {
+          hasManualRefresh: this.hasManualRefresh,
+          pagination:       { ...this.pagination },
+          force:            this.paginating !== null // Fix for manual refresh (before ripped out).
+        };
+
+        Vue.set(this, 'paginating', true);
+
+        const that = this;
+
+        return this.$store.dispatch(`${ currStore }/findPage`, {
+          type,
+          opt
+        })
+          .finally(() => Vue.set(that, 'paginating', false));
+      }
+
       let incremental = 0;
 
       if (this.incremental) {
@@ -124,8 +165,6 @@ export default {
         hasManualRefresh: this.hasManualRefresh
       };
 
-      const schema = this.$store.getters[`${ currStore }/schemaFor`](type);
-
       if (schema?.attributes?.namespaced) { // Is this specific resource namespaced (could be primary or secondary resource)?
         opt.namespaced = this.namespaceFilter; // namespaceFilter will only be populated if applicable for primary resource
       }
@@ -181,6 +220,8 @@ export default {
       if (manualDataRefreshEnabled && resourceCount >= manualDataRefreshThreshold) {
         watch = false;
         isTooManyItemsToAutoUpdate = true;
+      } else if (this.canPaginate) {
+        isTooManyItemsToAutoUpdate = true;
       }
 
       // incremental loading check

package/models/__tests__/cluster.test.ts

@@ -0,0 +1,44 @@
+import NormanCluster from '@shell/models/cluster';
+
+describe('class NormanCluster', () => {
+  const t = jest.fn(() => 'abc');
+  const ctx = { rootGetters: { 'i18n/t': t }, dispatch: jest.fn() };
+
+  it('should return empty arrays of system labels and system annotations if cluster labels and annotations are undefined', () => {
+    const cluster = new NormanCluster({}, ctx);
+
+    expect(cluster.systemLabels).toStrictEqual([]);
+    expect(cluster.systemAnnotations).toStrictEqual([]);
+  });
+
+  it('should list all the cluster\'s annotation keys that contain coreos.com, cattle.io, k3s.io, kubernetes.io, or k3s.io', () => {
+    const testAnnotations = ['cattle.io/test', 'coreos.com', 'test.cattle.io/something', 'kubernetes.io/test'];
+    const cluster = new NormanCluster({
+      annotations: {
+        'cattle.io/test':           'abc',
+        'coreos.com':               'abc',
+        'k3s.io/test':              'abc',
+        'test.cattle.io/something': 'abc',
+        'kubernetes.io/test':       'abc',
+        'other-label':              'abc'
+      }
+    }, ctx);
+
+    expect(testAnnotations.find((annotation) => !cluster.systemAnnotations.includes(annotation))).toBeUndefined();
+  });
+
+  it('should list all the cluster\'s label keys that contain io.cattle.lifecycle, kubernetes.io, cattle.io, or k3s.io', () => {
+    const testLabels = ['cattle.io/test', 'test.io.cattle.lifecycle', 'test.kubernetes.io/test', 'k3s.io/test'];
+    const cluster = new NormanCluster({
+      labels: {
+        'cattle.io/test':           'abc',
+        'test.io.cattle.lifecycle': 'abc',
+        'k3s.io/test':              'abc',
+        'test.kubernetes.io/test':  'abc',
+        'other-label':              'abc'
+      }
+    }, ctx);
+
+    expect(testLabels.find((label) => !cluster.systemLabels.includes(label))).toBeUndefined();
+  });
+});

package/models/__tests__/fleet.cattle.io.cluster.test.ts

@@ -0,0 +1,36 @@
+import FleetCluster from '@shell/models/fleet.cattle.io.cluster';
+
+describe('class FleetCluster', () => {
+  it('should provide bundleInfo if correct data is present', () => {
+    const fleetCluster = new FleetCluster({
+      metadata: {},
+      spec:     {},
+      status:   { display: { readyBundles: '0/1' } },
+    });
+
+    expect(fleetCluster.bundleInfo.ready).toBe(0);
+    expect(fleetCluster.bundleInfo.total).toBe(1);
+    expect(Object.getOwnPropertyNames(fleetCluster.bundleInfo)).not.toContain('noValidData');
+  });
+  describe('should provide bundleInfo with error', () => {
+    it.each([
+      [''],
+      ['/'],
+      ['1/'],
+      ['/1'],
+      ['1/1/2'],
+      ['a/1'],
+      ['a/b'],
+      ['any-string'],
+      ['any-string1/string2']
+    ])('with multiple scenarios of wrongful "readyBundles" data', (readyBundles) => {
+      const fleetCluster = new FleetCluster({
+        metadata: {},
+        spec:     {},
+        status:   { display: { readyBundles } },
+      });
+
+      expect(Object.getOwnPropertyNames(fleetCluster.bundleInfo)).toContain('noValidData');
+    });
+  });
+});

package/models/__tests__/management.cattle.io.cluster.test.ts

@@ -0,0 +1,23 @@
+import MgmtCluster from '@shell/models/management.cattle.io.cluster';
+
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
+describe('class MgmtCluster', () => {
+  describe('provisioner', () => {
+    const testCases = [
+      [{ provider: 'rke', driver: 'imported' }, 'rke'],
+      [{ provider: 'k3s', driver: 'K3S' }, 'k3s'],
+      [{ provider: 'aks', driver: 'AKS' }, 'aks'],
+      [{}, 'imported'],
+    ];
+
+    it.each(testCases)('should return provisioner value properly based on the props data', (clusterData: Object, expected: String) => {
+      const cluster = new MgmtCluster({ status: clusterData });
+
+      expect(cluster.provisioner).toBe(expected);
+    }
+    );
+  });
+});

package/models/__tests__/management.cattle.io.node.ts

@@ -93,4 +93,89 @@ describe('class MgmtNode', () => {
       resetMocks();
     });
   });
+
+  describe('canScaleDown', () => {
+    const mgmtClusterId = 'test';
+    const nodeId = 'test/id';
+    const specs = {
+      worker: {
+        worker: true, etcd: false, controlPlane: false
+      },
+      etcd: {
+        worker: false, etcd: true, controlPlane: false
+      },
+      controlPlane: {
+        worker: false, etcd: false, controlPlane: true
+      },
+      etcdAndControlPlane: {
+        worker: false, etcd: true, controlPlane: true
+      },
+      all: {
+        worker: true, etcd: true, controlPlane: true
+      }
+    };
+
+    const workerNode = {
+      id:             '01',
+      isWorker:       true,
+      isControlPlane: false,
+      isEtcd:         false
+    };
+    const etcdNode = {
+      id:             '02',
+      isWorker:       false,
+      isControlPlane: false,
+      isEtcd:         true
+    };
+    const controlPlaneNode = {
+      id:             '03',
+      isWorker:       false,
+      isControlPlane: true,
+      isEtcd:         false
+    };
+    const etcdAndControlPlaneNode = {
+      id:             '03',
+      isWorker:       false,
+      isControlPlane: true,
+      isEtcd:         true
+    };
+    const allNode = {
+      id:             '04',
+      isWorker:       true,
+      isControlPlane: true,
+      isEtcd:         true
+    };
+
+    const baseCtx = {
+      rootGetters: {
+        'rancher/byId': () => ({ actions: { scaledown: 'scaledown' } }),
+        'i18n/t':       t
+      }
+    };
+
+    it.each([
+      [{ spec: specs.worker, nodes: [workerNode] }, true],
+      [{ spec: specs.etcd, nodes: [etcdNode, etcdNode, controlPlaneNode] }, true],
+      [{ spec: specs.etcdAndControlPlane, nodes: [etcdAndControlPlaneNode, etcdAndControlPlaneNode] }, true],
+      [{ spec: specs.etcdAndControlPlane, nodes: [etcdAndControlPlaneNode] }, false],
+      [{ spec: specs.all, nodes: [allNode] }, false],
+      [{ spec: specs.all, nodes: [allNode, allNode] }, true],
+    ])('should return canScaleDown properly', (data, expected) => {
+      const { spec, nodes } = data;
+      const mgmtNode = new MgmtNode({
+        spec,
+        id: nodeId
+      }, {
+        ...baseCtx,
+        getters: {
+          all: () => [{
+            mgmtClusterId,
+            nodes
+          }]
+        }
+      });
+
+      expect(mgmtNode.canScaleDown).toStrictEqual(expected);
+    });
+  });
 });

package/models/__tests__/management.cattle.io.nodepool.ts

@@ -0,0 +1,83 @@
+import MgmtNodePool from '@shell/models/management.cattle.io.nodepool';
+
+describe('class MgmtNodePool', () => {
+  describe('canScaleDownPool', () => {
+    const mgmtClusterId = 'test';
+    const nodeId = 'test/id';
+    const specs = {
+      worker: {
+        worker: true, etcd: false, controlPlane: false
+      },
+      etcd: {
+        worker: false, etcd: true, controlPlane: false
+      },
+      controlPlane: {
+        worker: false, etcd: false, controlPlane: true
+      },
+      etcdAndControlPlane: {
+        worker: false, etcd: true, controlPlane: true
+      },
+      all: {
+        worker: true, etcd: true, controlPlane: true
+      }
+    };
+
+    const workerNode = {
+      id:             '01',
+      isWorker:       true,
+      isControlPlane: false,
+      isEtcd:         false
+    };
+    const etcdNode = {
+      id:             '02',
+      isWorker:       false,
+      isControlPlane: false,
+      isEtcd:         true
+    };
+    const controlPlaneNode = {
+      id:             '03',
+      isWorker:       false,
+      isControlPlane: true,
+      isEtcd:         false
+    };
+    const etcdAndControlPlaneNode = {
+      id:             '03',
+      isWorker:       false,
+      isControlPlane: true,
+      isEtcd:         true
+    };
+    const allNode = {
+      id:             '04',
+      isWorker:       true,
+      isControlPlane: true,
+      isEtcd:         true
+    };
+
+    const baseCtx = { rootGetters: { 'rancher/byId': () => ({ actions: { scaledown: 'scaledown' } }) } };
+
+    it.each([
+      [{ spec: specs.worker, nodes: [workerNode] }, true],
+      [{ spec: specs.etcd, nodes: [etcdNode, etcdNode, controlPlaneNode] }, true],
+      [{ spec: specs.etcdAndControlPlane, nodes: [etcdAndControlPlaneNode, etcdAndControlPlaneNode] }, true],
+      [{ spec: specs.etcdAndControlPlane, nodes: [etcdAndControlPlaneNode] }, false],
+      [{ spec: specs.all, nodes: [allNode] }, false],
+      [{ spec: specs.all, nodes: [allNode, allNode] }, true],
+    ])('should return canScaleDownPool properly', (data, expected) => {
+      const { spec, nodes } = data;
+      const mgmtNode = new MgmtNodePool({
+        spec,
+        id: nodeId
+      }, {
+        ...baseCtx,
+        getters: {
+          all: () => [{
+            mgmtClusterId,
+            nodes
+          }]
+        }
+      });
+
+      expect(mgmtNode.canScaleDownPool()).toStrictEqual(expected);
+    });
+  });
+});