@rancher/shell 1.2.0 → 2.0.0

package/list/node.vue

@@ -1,21 +1,28 @@
-<script>
-import ResourceTable from '@shell/components/ResourceTable';
-import Tag from '@shell/components/Tag';
+<script lang="ts">
+import ResourceTable from '@shell/components/ResourceTable.vue';
+import Tag from '@shell/components/Tag.vue';
 import { Banner } from '@components/Banner';
-import {
-  STATE, NAME, ROLES, VERSION, INTERNAL_EXTERNAL_IP, CPU, RAM, PODS, AGE, KUBE_NODE_OS
-} from '@shell/config/table-headers';
+import { PODS } from '@shell/config/table-headers';
 import metricPoller from '@shell/mixins/metric-poller';
 
+import { CAPI as CAPI_ANNOTATIONS } from '@shell/config/labels-annotations.js';
+
+import { defineComponent } from 'vue';
+import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
+import { FilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+
 import {
   CAPI,
   MANAGEMENT, METRIC, NODE, NORMAN, POD
 } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { GROUP_RESOURCES, mapPref } from '@shell/store/prefs';
-import { COLUMN_BREAKPOINTS } from '@shell/components/SortableTable/index.vue';
+import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
+
 import ResourceFetch from '@shell/mixins/resource-fetch';
-export default {
+import { mapGetters } from 'vuex';
+
+export default defineComponent({
   name:       'ListNode',
   components: {
     ResourceTable,
@@ -36,94 +43,92 @@ export default {
     useQueryParamsForSimpleFiltering: {
       type:    Boolean,
       default: false
+    },
+
+    listComponent: {
+      type:    Boolean,
+      default: false
     }
   },
 
   async fetch() {
     this.$initializeFetchData(this.resource);
 
-    const hash = { kubeNodes: this.$fetchType(this.resource) };
-
-    this.canViewPods = this.$store.getters[`cluster/schemaFor`](POD);
-
-    if (this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE)) {
-      // Required for Drain/Cordon action
-      hash.normanNodes = this.$fetchType(NORMAN.NODE, [], 'rancher');
-    }
-
-    if (this.$store.getters[`rancher/schemaFor`](NORMAN.NODE)) {
-      hash.mgmtNodes = this.$fetchType(MANAGEMENT.NODE, [], 'management');
-    }
-
-    if (this.$store.getters[`management/schemaFor`](CAPI.MACHINE)) {
-      // Required for ssh / download key actions
-      hash.machines = this.$fetchType(CAPI.MACHINE, [], 'management');
-    }
-
-    if (this.canViewPods) {
-      // Used for running pods metrics - we don't need to block on this to show the list of nodes
-      this.$fetchType(POD);
-    }
-
-    await allHash(hash);
+    await allHash({
+      kubeNodes: this.$fetchType(this.resource),
+      ...this.fetchSecondaryResources(),
+    });
   },
 
   data() {
-    return { canViewPods: false };
+    return {
+      // Pods required for `Pods` column's running pods metrics
+      // podConsumedUsage = podConsumed / podConsumedUsage. podConsumed --> pods. allPods.filter((pod) => pod.spec.nodeName === this.name)
+      canViewPods:        !!this.$store.getters[`cluster/schemaFor`](POD),
+      // Norman node required for Drain/Cordon/Uncordon action
+      canViewNormanNodes: !!this.$store.getters[`rancher/schemaFor`](NORMAN.NODE),
+      // Mgmt Node required to find Norman node
+      canViewMgmtNodes:   !!this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE),
+      // Required for ssh / download key actions
+      canViewMachines:    !!this.$store.getters[`management/schemaFor`](CAPI.MACHINE),
+      // Required for CPU and RAM columns
+      canViewNodeMetrics: !!this.$store.getters['cluster/schemaFor'](METRIC.NODE),
+    };
   },
 
   beforeDestroy() {
     // Stop watching pods, nodes and node metrics
-    this.$store.dispatch('cluster/forgetType', POD);
+    if (this.canViewPods) {
+      this.$store.dispatch('cluster/forgetType', POD);
+    }
+
     this.$store.dispatch('cluster/forgetType', NODE);
     this.$store.dispatch('cluster/forgetType', METRIC.NODE);
   },
 
   computed: {
+    ...mapGetters(['currentCluster']),
     hasWindowsNodes() {
-      return (this.rows || []).some((node) => node.status.nodeInfo.operatingSystem === 'windows');
+      // Note if server side pagination is used this is only applicable to the current page
+      return (this.rows || []).some((node: any) => node.status.nodeInfo.operatingSystem === 'windows');
     },
 
     tableGroup: mapPref(GROUP_RESOURCES),
 
-    parsedRows() {
-      this.rows.forEach((row) => {
-        row.displayTaintsAndLabels = (row.spec.taints && row.spec.taints.length) || !!row.customLabelCount;
-      });
+    headers() {
+      // This is all about adding the pods column... if the user can see pods
 
-      return this.rows;
-    },
+      if (this.canPaginate) {
+        const paginationHeaders = [...this.$store.getters['type-map/headersFor'](this.schema, true)];
 
-    headers() {
-      const headers = [
-        STATE,
-        NAME,
-        ROLES,
-        VERSION,
-        INTERNAL_EXTERNAL_IP,
-        {
-          ...KUBE_NODE_OS,
-          breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
-          getValue:   (row) => row.status?.nodeInfo?.operatingSystem
-        },
-        {
-          ...CPU,
-          breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
-          getValue:   (row) => row.cpuUsagePercentage
-        }, {
-          ...RAM,
-          breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
-          getValue:   (row) => row.ramUsagePercentage
-        }];
+        if (paginationHeaders) {
+          if (this.canViewPods) {
+            paginationHeaders.splice(paginationHeaders.length - 1, 0, {
+              ...PODS,
+              breakpoint: COLUMN_BREAKPOINTS.DESKTOP,
+              sort:       false,
+              search:     false,
+              getValue:   (row: any) => row.podConsumedUsage
+            });
+          }
+
+          return paginationHeaders;
+        } else {
+          console.warn('Nodes list expects pagination headers but none found'); // eslint-disable-line no-console
+
+          return [];
+        }
+      }
+
+      const headers = [...this.$store.getters['type-map/headersFor'](this.schema, false)];
 
       if (this.canViewPods) {
-        headers.push({
+        headers.splice(headers.length - 1, 0, {
           ...PODS,
           breakpoint: COLUMN_BREAKPOINTS.DESKTOP,
-          getValue:   (row) => row.podConsumedUsage
+          getValue:   (row: any) => row.podConsumedUsage
         });
       }
-      headers.push(AGE);
 
       return headers;
     },
@@ -131,24 +136,154 @@ export default {
 
   methods: {
     async loadMetrics() {
-      const schema = this.$store.getters['cluster/schemaFor'](METRIC.NODE);
+      if (!this.canViewNodeMetrics) {
+        return;
+      }
+
+      if (this.canPaginate) {
+        if (!this.rows.length) {
+          return;
+        }
 
-      if (schema) {
+        const opt: ActionFindPageArgs = {
+          force:      true,
+          pagination: new FilterArgs({
+            filters: new PaginationParamFilter({
+              fields: this.rows.map((r: any) => new PaginationFilterField({
+                field: 'metadata.name',
+                value: r.id
+              }))
+            })
+          })
+        };
+
+        await this.$store.dispatch('cluster/findPage', {
+          type: METRIC.NODE,
+          opt
+        });
+      } else {
         await this.$store.dispatch('cluster/findAll', {
           type: METRIC.NODE,
           opt:  { force: true }
         });
-
-        this.$forceUpdate();
       }
+
+      this.$forceUpdate();
     },
 
-    toggleLabels(row) {
+    toggleLabels(row: any) {
       this.$set(row, 'displayLabels', !row.displayLabels);
     },
-  }
 
-};
+    fetchSecondaryResources(): { [key: string]: Promise<any>} {
+      if (this.canPaginate) {
+        return {};
+      }
+
+      const hash: { [key: string]: Promise<any>} = {};
+
+      if (this.canViewMgmtNodes) {
+        hash.mgmtNodes = this.$fetchType(MANAGEMENT.NODE, [], 'management');
+      }
+
+      if (this.canViewNormanNodes) {
+        hash.normanNodes = this.$fetchType(NORMAN.NODE, [], 'rancher');
+      }
+
+      if (this.canViewMachines) {
+        hash.machines = this.$fetchType(CAPI.MACHINE, [], 'management');
+      }
+
+      if (this.canViewPods) {
+        // No need to block on this
+        this.$fetchType(POD);
+      }
+
+      return hash;
+    },
+
+    /**
+     * Nodes columns need other resources in order to show data in some columns
+     *
+     * In the paginated world we want to resrict the fetch of those resources to only the one's we need
+     *
+     * So when we have a page.... use those entries as filters when fetching the other resources
+     */
+    async fetchPageSecondaryResources(force = false) {
+      if (!this.rows?.length) {
+        return;
+      }
+
+      if (this.canViewMgmtNodes && this.canViewNormanNodes) {
+        // We only fetch mgmt node to get norman node. We only fetch node to get node actions
+        // See https://github.com/rancher/dashboard/issues/10743
+        const opt: ActionFindPageArgs = {
+          force,
+          pagination: new FilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(this.rows.map((r: any) => new PaginationFilterField({
+              field: 'status.nodeName',
+              value: r.id
+            }))),
+          })
+        };
+
+        this.$store.dispatch(`management/findPage`, { type: MANAGEMENT.NODE, opt })
+          .then(() => {
+            this.$store.dispatch(`rancher/findAll`, { type: NORMAN.NODE, opt: { force } });
+          });
+      }
+
+      if (this.canViewMachines) {
+        const namespace = this.currentCluster.provClusterId?.split('/')[0];
+
+        if (namespace) {
+          const opt: ActionFindPageArgs = {
+            force,
+            namespaced: namespace,
+            pagination: new FilterArgs({
+              filters: PaginationParamFilter.createMultipleFields(
+                this.rows.reduce((res: PaginationFilterField[], r: any ) => {
+                  const name = r.metadata?.annotations?.[CAPI_ANNOTATIONS.MACHINE_NAME];
+
+                  if (name) {
+                    res.push(new PaginationFilterField({
+                      field: 'metadata.name',
+                      value: name,
+                    }));
+                  }
+
+                  return res;
+                }, [])
+              )
+            })
+          };
+
+          this.$store.dispatch(`management/findPage`, { type: CAPI.MACHINE, opt });
+        }
+      }
+
+      if (this.canViewPods) {
+        // Note - fetching pods for current page could be a LOT still (probably max of 3k - 300 pods per node x 100 nodes in a page)
+        const opt: ActionFindPageArgs = {
+          force,
+          pagination: new FilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(
+              this.rows.map((r: any) => new PaginationFilterField({
+                field: 'spec.nodeName',
+                value: r.id,
+              }))
+            )
+          })
+        };
+
+        this.$store.dispatch(`cluster/findPage`, { type: POD, opt });
+      }
+
+      // Fetch metrics given the current page
+      this.loadMetrics();
+    },
+  },
+});
 </script>
 
 <template>
@@ -162,11 +297,15 @@ export default {
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
-      :rows="parsedRows"
+      :rows="rows"
       :sub-rows="true"
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      data-testid="cluster-node-list"
+      :external-pagination-enabled="canPaginate"
+      :external-pagination-result="paginationResult"
+      @pagination-changed="paginationChanged"
       v-on="$listeners"
     >
       <template #sub-row="{fullColspan, row, onRowMouseEnter, onRowMouseLeave}">

package/list/provisioning.cattle.io.cluster.vue

@@ -176,13 +176,13 @@ export default {
         v-if="canImport"
         slot="extraActions"
       >
-        <n-link
+        <router-link
           :to="importLocation"
           class="btn role-primary mr-10"
           data-testid="cluster-manager-list-import"
         >
           {{ t('cluster.importAction') }}
-        </n-link>
+        </router-link>
       </template>
     </Masthead>
 
@@ -226,15 +226,28 @@ export default {
       <template #cell:summary="{row}">
         <span v-if="!row.stateParts.length">{{ row.nodes.length }}</span>
       </template>
+      <template #col:kubernetesVersion="{row}">
+        <td class="col-name">
+          <span>
+            {{ row.kubernetesVersion }}
+          </span>
+          <div
+            v-clean-tooltip="{content: row.architecture.tooltip, placement: 'left'}"
+            class="text-muted"
+          >
+            {{ row.architecture.label }}
+          </div>
+        </td>
+      </template>
       <template #cell:explorer="{row}">
-        <n-link
+        <router-link
           v-if="row.mgmt && row.mgmt.isReady && !row.hasError"
           data-testid="cluster-manager-list-explore-management"
           class="btn btn-sm role-secondary"
           :to="{name: 'c-cluster', params: {cluster: row.mgmt.id}}"
         >
           {{ t('cluster.explore') }}
-        </n-link>
+        </router-link>
         <button
           v-else
           data-testid="cluster-manager-list-explore"

package/list/ui.cattle.io.navlink.vue

@@ -41,9 +41,9 @@ export default {
   >
     <template #cell:to="{row}">
       <template v-if="row.spec && row.spec.toService">
-        <n-link :to="{name: 'c-cluster-product-resource-namespace-id', params: { cluster: clusterId, product: 'explorer', resource: 'service', namespace: row.spec.toService.namespace, id: row.spec.toService.name}}">
+        <router-link :to="{name: 'c-cluster-product-resource-namespace-id', params: { cluster: clusterId, product: 'explorer', resource: 'service', namespace: row.spec.toService.namespace, id: row.spec.toService.name}}">
           {{ row.spec.toService.namespace }}/{{ row.spec.toService.name }}
-        </n-link>:
+        </router-link>:
         <a
           :href="row.link"
           :target="row.actualTarget"

package/list/workload.vue

@@ -4,6 +4,7 @@ import {
   WORKLOAD_TYPES, SCHEMA, NODE, POD, LIST_WORKLOAD_TYPES
 } from '@shell/config/types';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import { WORKLOAD_HEALTH_SCALE } from '@shell/config/table-headers';
 
 const schema = {
   id:         'workload',
@@ -93,6 +94,10 @@ export default {
       return this.$route.params.resource === schema.id;
     },
 
+    paginationEnabled() {
+      return !this.allTypes && this.$store.getters[`cluster/paginationEnabled`]();
+    },
+
     schema() {
       const { params:{ resource:type } } = this.$route;
 
@@ -120,6 +125,17 @@ export default {
 
       return out;
     },
+
+    headers() {
+      const headers = this.$store.getters['type-map/headersFor'](this.schema, false);
+
+      if (this.paginationEnabled) {
+        // See https://github.com/rancher/dashboard/issues/10417, health comes from selectors applied locally to all pods (bad)
+        return headers.filter((h) => h.name !== WORKLOAD_HEALTH_SCALE.name);
+      }
+
+      return headers;
+    }
   },
 
   // All of the resources that we will load that we need for the loading indicator
@@ -129,6 +145,11 @@ export default {
 
   methods: {
     loadHeathResources() {
+      // See https://github.com/rancher/dashboard/issues/10417, health comes from selectors applied locally to all pods (bad)
+      if (this.paginationEnabled) {
+        return;
+      }
+
       // Fetch these in the background to populate workload health
       if ( this.allTypes ) {
         this.$fetchType(POD);
@@ -167,6 +188,7 @@ export default {
   <ResourceTable
     :loading="$fetchState.pending"
     :schema="schema"
+    :headers="headers"
     :rows="filteredRows"
     :overflow-y="true"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"

package/machine-config/__tests__/vmwarevsphere-pool-config-merge.test.ts

@@ -0,0 +1,30 @@
+import { vspherePoolConfigMerge } from '@shell/machine-config/vmwarevsphere-pool-config-merge';
+
+describe('vspherePoolConfigMerge', () => {
+  const testCases: Array<[object?, object?, object?]> = [
+    // Some array test cases, an array from the first object should be replaced with the array from the second object
+    [{ a: ['one'] }, { a: [] }, { a: [] }],
+    [{ a: ['one', 'two'] }, { a: ['one', 'two', 'three'] }, { a: ['one', 'two', 'three'] }],
+    [{ a: ['one', 'two'], b: ['three', 'four'] }, { a: ['one'], b: [] }, { a: ['one'], b: [] }],
+    [{
+      a: ['one', 'two'], b: ['three', 'four'], c: 'five'
+    }, { a: ['one'], b: [] }, {
+      a: ['one'], b: [], c: 'five'
+    }],
+    // Some other test cases
+    [{ a: 'one' }, { b: 'two' }, { a: 'one', b: 'two' }],
+    [{ a: 'one' }, { a: '', b: 'two' }, { a: '', b: 'two' }],
+    [{ a: 'one', b: 'two' }, { a: 1, c: { d: null } }, {
+      a: 1, b: 'two', c: { d: null }
+    }],
+    [undefined, undefined, {}],
+    [{}, undefined, {}],
+    [undefined, {}, {}],
+  ];
+
+  it.each(testCases)('should merge properly', (obj1, obj2, expected) => {
+    const result = vspherePoolConfigMerge(obj1, obj2);
+
+    expect(result).toStrictEqual(expected);
+  });
+});

package/machine-config/__tests__/vmwarevsphere.test.ts

@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils';
 import vmwarevsphere, { DEFAULT_VALUES, SENTINEL } from '@shell/machine-config/vmwarevsphere.vue';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: vmwarevsphere', () => {
   const defaultGetters = { 'i18n/t': jest.fn().mockImplementation((key: string) => key) };
@@ -16,8 +15,7 @@ describe('component: vmwarevsphere', () => {
       $fetchState: { pending: false },
       $store:      { getters: defaultGetters },
     },
-    stubs:      { CodeMirror: true },
-    directives: { cleanHtmlDirective }
+    stubs: { CodeMirror: true },
   };
   const defaultCreateSetup = {
     ...baseSetup,

package/machine-config/amazonec2.vue

@@ -70,7 +70,7 @@ export default {
       this.kmsClient = await this.$store.dispatch('aws/kms', { region, cloudCredentialId: this.credentialId });
 
       if ( !this.instanceInfo ) {
-        this.instanceInfo = await this.$store.dispatch('aws/instanceInfo', { client: this.ec2Client } );
+        this.instanceInfo = await this.$store.dispatch('aws/describeInstanceTypes', { client: this.ec2Client } );
       }
 
       const hash = {};

package/machine-config/azure.vue

@@ -528,10 +528,11 @@ export default {
           :required="true"
           :label="t('cluster.machineConfig.azure.location.label')"
           :disabled="disabled"
+          data-testid="machineConfig-azure-location"
           @input="setLocation"
         />
       </div>
-      <div>
+      <div data-testid="machineConfig-azure-environment-value">
         <label
           v-clean-tooltip="t('cluster.machineConfig.azure.environment.tooltip')"
           :style="{'display':'block'}"

package/machine-config/generic.vue

@@ -29,11 +29,11 @@ export default {
     },
   },
 
-  fetch() {
+  async fetch() {
     this.errors = [];
 
     try {
-      this.fields = this.$store.getters['plugins/fieldsForDriver'](this.provider);
+      this.fields = await this.$store.getters['plugins/fieldsForDriver'](this.provider);
       const name = `rke-machine-config.cattle.io.${ this.provider }config`;
 
       if ( !this.fields ) {
@@ -42,6 +42,15 @@ export default {
     } catch (e) {
       this.errors = exceptionToErrorsArray(e);
     }
+
+    const normanType = this.$store.getters['plugins/credentialFieldForDriver'](this.provider);
+    const normanSchema = this.$store.getters['rancher/schemaFor'](`${ normanType }credentialconfig`);
+
+    if ( normanSchema ) {
+      this.cloudCredentialKeys = Object.keys(normanSchema.resourceFields || {});
+    } else {
+      this.cloudCredentialKeys = await this.$store.getters['plugins/fieldNamesForDriver'](this.provider);
+    }
   },
 
   data() {
@@ -51,19 +60,6 @@ export default {
     };
   },
 
-  computed: {
-    cloudCredentialKeys() {
-      const normanType = this.$store.getters['plugins/credentialFieldForDriver'](this.provider);
-      const normanSchema = this.$store.getters['rancher/schemaFor'](`${ normanType }credentialconfig`);
-
-      if ( normanSchema ) {
-        return Object.keys(normanSchema.resourceFields || {});
-      } else {
-        return this.$store.getters['plugins/fieldNamesForDriver'](this.provider);
-      }
-    }
-  },
-
   watch: {
     'credentialId'() {
       this.$fetch();

package/machine-config/vmwarevsphere-pool-config-merge.ts

@@ -0,0 +1,25 @@
+import mergeWith from 'lodash/mergeWith';
+
+/**
+ * Helper function to alter Lodash merge function default behaviour on merging arrays while updating machine pool configuration.
+ *
+ * In rke2.vue, the syncMachineConfigWithLatest function updates machine pool configuration by
+ * merging the latest configuration received from the backend with the current configuration updated by the user.
+ * However, Lodash's merge function treats arrays like object so index values are merged and not appended to arrays
+ * resulting in undesired outcomes for us, Example:
+ *
+ * const lastSavedConfigFromBE = { a: ["test"] };
+ * const currentConfigByUser = { a: [] };
+ * merge(lastSavedConfigFromBE, currentConfigByUser); // returns { a: ["test"] }; but we expect { a: [] };
+ *
+ * More info: https://github.com/lodash/lodash/issues/1313
+ *
+ * This helper function addresses the issue by always replacing the old array with the new array during the merge process.
+ */
+export function vspherePoolConfigMerge(obj1 = {}, obj2 = {}): Object {
+  return mergeWith(obj1, obj2, (obj1Value, obj2Value) => {
+    if (Array.isArray(obj1Value) && Array.isArray(obj2Value)) {
+      return obj2Value;
+    }
+  });
+}