@rancher/shell 0.5.3 → 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,12 +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);
+  });
+});