@rancher/shell 3.0.1 → 3.0.2-rc.2

package/list/management.cattle.io.setting.vue

@@ -62,16 +62,31 @@ export default {
     return { settings: null };
   },
 
-  computed: { ...mapGetters({ t: 'i18n/t' }) },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    ...mapGetters({
+      // Use either these Vuex getters
+      // OR the props to set the action menu state,
+      // but don't use both.
+      targetElem: 'action-menu/elem',
+      shouldShow: 'action-menu/showing',
+    }),
+  },
 
   methods: {
-    showActionMenu(e, setting) {
+    toggleActionMenu(e, setting) {
       const actionElement = e.srcElement;
 
-      this.$store.commit(`action-menu/show`, {
-        resources: setting.data,
-        elem:      actionElement
-      });
+      if (!this.targetElem && !this.shouldShow) {
+        this.$store.commit(`action-menu/show`, {
+          resources: setting.data,
+          elem:      actionElement
+        });
+      } else if (this.targetElem === actionElement && this.shouldShow) {
+        // this condition is needed so that we can "toggle" the action menu with
+        // the keyboard for accessibility (row action menu)
+        this.$store.commit('action-menu/hide');
+      }
     },
   }
 };
@@ -101,7 +116,7 @@ export default {
             <span
               v-if="setting.fromEnv"
               class="modified"
-            >Set by Environment Variable</span>
+            >{{ t('advancedSettings.setEnv') }}</span>
             <span
               v-else-if="setting.customized"
               class="modified"
@@ -118,23 +133,27 @@ export default {
             aria-expanded="false"
             type="button"
             class="btn btn-sm role-multi-action actions"
-            @click="showActionMenu($event, setting)"
+            role="button"
+            :aria-label="t('advancedSettings.edit.label')"
+            @click="toggleActionMenu($event, setting)"
           >
             <i class="icon icon-actions" />
           </button>
         </div>
       </div>
       <div value>
-        <div v-if="setting.hide">
+        <div v-if="setting.canHide">
           <button
             class="btn btn-sm role-primary"
+            role="button"
+            :aria-label="t('advancedSettings.hideShow')"
             @click="setting.hide = !setting.hide"
           >
-            {{ t('advancedSettings.show') }} {{ setting.id }}
+            {{ setting.hide ? t('advancedSettings.show') : t('advancedSettings.hide') }} {{ setting.id }}
           </button>
         </div>
         <div
-          v-else
+          v-show="!setting.canHide || (setting.canHide && !setting.hide)"
           class="settings-value"
         >
           <pre v-if="setting.kind === 'json'">{{ setting.json }}</pre>
@@ -146,14 +165,6 @@ export default {
             class="text-muted"
           >&lt;{{ t('advancedSettings.none') }}&gt;</pre>
         </div>
-        <div v-if="setting.canHide && !setting.hide">
-          <button
-            class="btn btn-sm role-primary"
-            @click="setting.hide = !setting.hide"
-          >
-            {{ t('advancedSettings.hide') }} {{ setting.id }}
-          </button>
-        </div>
       </div>
     </div>
   </div>

package/list/namespace.vue

@@ -1,6 +1,9 @@
 <script>
+/**
+ * This file is used in shell/scripts/test-plugins-build.sh (creates an extension with it in, and builds using a shell built from source)
+ */
 import { mapGetters } from 'vuex';
-import { NS_SNAPSHOT_QUOTA } from '../config/table-headers';
+import { NS_SNAPSHOT_QUOTA } from '@shell/config/table-headers';
 import ResourceTable from '@shell/components/ResourceTable';
 import { HCI } from '@shell/config/types';
 export default {

package/list/networking.k8s.io.ingress.vue

@@ -1,9 +1,8 @@
 <script>
-import ResourceTable from '@shell/components/ResourceTable';
-import ResourceFetch from '@shell/mixins/resource-fetch';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
+
 export default {
-  components: { ResourceTable },
-  mixins:     [ResourceFetch],
+  components: { PaginatedResourceTable },
   props:      {
     resource: {
       type:     String,
@@ -18,19 +17,23 @@ export default {
       default: false
     }
   },
-  async fetch() {
-    // pathExistsInSchema requires schema networking.k8s.io.ingress to have resources fields via schema definition but none were found. has the schema 'fetchResourceFields' been called?
-    await Promise.all([this.schema.fetchResourceFields(), this.$fetchType(this.resource)]);
+
+  methods: {
+    /**
+     * opts: FetchSecondaryResourcesOpts
+     */
+    async fetchSecondaryResources(opts) {
+      // pathExistsInSchema requires schema networking.k8s.io.ingress to have resources fields via schema definition but none were found. has the schema 'fetchResourceFields' been called?
+      await this.schema.fetchResourceFields();
+    }
   }
 };
 </script>
 
 <template>
-  <ResourceTable
+  <PaginatedResourceTable
     :schema="schema"
-    :rows="rows"
-    :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+    :fetchSecondaryResources="fetchSecondaryResources"
   />
 </template>

package/list/node.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import ResourceTable from '@shell/components/ResourceTable.vue';
+import PaginatedResourceTable, { FetchPageSecondaryResourcesOpts } from '@shell/components/PaginatedResourceTable.vue';
 import Tag from '@shell/components/Tag.vue';
 import { Banner } from '@components/Banner';
 import { PODS } from '@shell/config/table-headers';
@@ -15,22 +15,21 @@ 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/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',
+  name: 'ListNode',
+
   components: {
-    ResourceTable,
+    PaginatedResourceTable,
     Tag,
     Banner
   },
-  mixins: [metricPoller, ResourceFetch],
+
+  mixins: [metricPoller],
 
   props: {
     resource: {
@@ -54,15 +53,6 @@ export default defineComponent({
     }
   },
 
-  async fetch() {
-    this.$initializeFetchData(this.resource);
-
-    await allHash({
-      kubeNodes: this.$fetchType(this.resource),
-      ...this.fetchSecondaryResources(),
-    });
-  },
-
   data() {
     return {
       // Pods required for `Pods` column's running pods metrics
@@ -91,38 +81,27 @@ export default defineComponent({
 
   computed: {
     ...mapGetters(['currentCluster']),
+
+    kubeNodes() {
+      // Note if server side pagination is used this is only the current page
+      return this.$store.getters[`cluster/all`](this.resource);
+    },
+
     hasWindowsNodes() {
       // 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');
+      return (this.kubeNodes || []).some((node: any) => node.status.nodeInfo.operatingSystem === 'windows');
     },
 
     tableGroup: mapPref(GROUP_RESOURCES),
 
-    headers() {
-      // This is all about adding the pods column... if the user can see pods
+    canPaginate() {
+      const args = { id: this.resource?.id || this.resource };
 
-      if (this.canPaginate) {
-        const paginationHeaders = [...this.$store.getters['type-map/headersFor'](this.schema, true)];
-
-        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 [];
-        }
-      }
+      return this.resource && this.$store.getters[`cluster/paginationEnabled`]?.(args);
+    },
 
+    headers() {
+      // This is all about adding the pods column... if the user can see pods
       const headers = [...this.$store.getters['type-map/headersFor'](this.schema, false)];
 
       if (this.canViewPods) {
@@ -135,6 +114,34 @@ export default defineComponent({
 
       return headers;
     },
+
+    paginationHeaders() {
+      // This is all about adding the pods column... if the user can see pods
+
+      if (!this.canPaginate) {
+        return [];
+      }
+
+      const paginationHeaders = [...this.$store.getters['type-map/headersFor'](this.schema, true)];
+
+      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 [];
+      }
+    },
   },
 
   methods: {
@@ -144,7 +151,7 @@ export default defineComponent({
       }
 
       if (this.canPaginate) {
-        if (!this.rows.length) {
+        if (!this.kubeNodes.length) {
           return;
         }
 
@@ -152,7 +159,7 @@ export default defineComponent({
           force:      true,
           pagination: new FilterArgs({
             filters: new PaginationParamFilter({
-              fields: this.rows.map((r: any) => new PaginationFilterField({
+              fields: this.kubeNodes.map((r: any) => new PaginationFilterField({
                 field: 'metadata.name',
                 value: r.id
               }))
@@ -179,27 +186,23 @@ export default defineComponent({
     },
 
     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');
+        hash.mgmtNodes = this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.NODE });
       }
 
       if (this.canViewNormanNodes) {
-        hash.normanNodes = this.$fetchType(NORMAN.NODE, [], 'rancher');
+        hash.normanNodes = this.$store.dispatch(`rancher/findAll`, { type: NORMAN.NODE });
       }
 
       if (this.canViewMachines) {
-        hash.machines = this.$fetchType(CAPI.MACHINE, [], 'management');
+        hash.machines = this.$store.dispatch(`management/findAll`, { type: CAPI.MACHINE });
       }
 
       if (this.canViewPods) {
         // No need to block on this
-        this.$fetchType(POD);
+        this.$store.dispatch(`cluster/findAll`, { type: POD });
       }
 
       return hash;
@@ -208,7 +211,7 @@ export default defineComponent({
     /**
      * 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
+     * In the paginated world we want to restrict 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
      */
@@ -218,6 +221,11 @@ export default defineComponent({
       }
 
       if (this.canViewMgmtNodes && this.canViewNormanNodes) {
+        if (this.canViewNormanNodes) {
+          // Ideally we only fetch the nodes we need....
+          this.$store.dispatch(`rancher/findAll`, { type: NORMAN.NODE });
+        }
+
         // 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 = {
@@ -230,10 +238,7 @@ export default defineComponent({
           })
         };
 
-        this.$store.dispatch(`management/findPage`, { type: MANAGEMENT.NODE, opt })
-          .then(() => {
-            this.$store.dispatch(`rancher/findAll`, { type: NORMAN.NODE, opt: { force } });
-          });
+        this.$store.dispatch(`management/findPage`, { type: MANAGEMENT.NODE, opt });
       }
 
       if (this.canViewMachines) {
@@ -296,19 +301,16 @@ export default defineComponent({
       color="info"
       :label="t('cluster.custom.registrationCommand.windowsWarning')"
     />
-    <ResourceTable
+    <PaginatedResourceTable
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
-      :rows="rows"
+      :paginationHeaders="paginationHeaders"
       :sub-rows="true"
-      :loading="loading"
+      :fetchSecondaryResources="fetchSecondaryResources"
+      :fetchPageSecondaryResources="fetchPageSecondaryResources"
       :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"
     >
       <template #sub-row="{fullColspan, row, onRowMouseEnter, onRowMouseLeave}">
         <tr
@@ -371,7 +373,7 @@ export default defineComponent({
           </td>
         </tr>
       </template>
-    </ResourceTable>
+    </PaginatedResourceTable>
   </div>
 </template>
 

package/list/persistentvolume.vue

@@ -1,13 +1,16 @@
-<script>
-import ResourceTable from '@shell/components/ResourceTable';
+<script lang="ts">
+import { defineComponent } from 'vue';
+import PaginatedResourceTable, { FetchPageSecondaryResourcesOpts } from '@shell/components/PaginatedResourceTable.vue';
 import { PVC } from '@shell/config/types';
-import ResourceFetch from '@shell/mixins/resource-fetch';
+import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
+import { FilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
-export default {
-  name:       'ListPersistentVolume',
-  components: { ResourceTable },
-  mixins:     [ResourceFetch],
-  props:      {
+export default defineComponent({
+  name: 'ListPersistentVolume',
+
+  components: { PaginatedResourceTable },
+
+  props: {
     resource: {
       type:     String,
       required: true,
@@ -21,26 +24,58 @@ export default {
     useQueryParamsForSimpleFiltering: {
       type:    Boolean,
       default: false
-    }
+    },
+
+    overflowX: {
+      type:    Boolean,
+      default: false
+    },
+
+    overflowY: {
+      type:    Boolean,
+      default: false
+    },
   },
 
-  async fetch() {
-    this.$initializeFetchData(this.resource);
+  methods: {
+    fetchSecondaryResources(): { [key: string]: Promise<any>} {
+      return { pvc: this.$store.dispatch(`cluster/findAll`, { type: PVC }) };
+    },
+
+    /**
+     * PV columns need other resources in order to show data in some columns
+     *
+     * So when we have a page.... use those entries as filters when fetching the other resources
+     */
+    async fetchPageSecondaryResources({ canPaginate, force, page }: FetchPageSecondaryResourcesOpts) {
+      if (!page?.length) {
+        return;
+      }
+
+      const opt: ActionFindPageArgs = {
+        force,
+        pagination: new FilterArgs({
+          filters: PaginationParamFilter.createMultipleFields(page.map((r: any) => new PaginationFilterField({
+            field: 'spec.volumeName',
+            value: r.metadata.name
+          }))),
+        })
+      };
 
-    this.$fetchType(PVC);
-    await this.$fetchType(this.resource);
+      return this.$store.dispatch(`cluster/findPage`, { type: PVC, opt });
+    },
   }
-};
+});
 </script>
 
 <template>
-  <ResourceTable
+  <PaginatedResourceTable
     :schema="schema"
-    :rows="rows"
-    :headers="$attrs.headers"
-    :group-by="$attrs.groupBy"
-    :loading="loading"
+    :fetchSecondaryResources="fetchSecondaryResources"
+    :fetchPageSecondaryResources="fetchPageSecondaryResources"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+
+    :overflow-x="overflowX"
+    :overflow-y="overflowY"
   />
 </template>

package/list/persistentvolumeclaim.vue

@@ -1,12 +1,9 @@
 <script>
-import ResourceTable from '@shell/components/ResourceTable';
-import { STORAGE_CLASS } from '@shell/config/types';
-import ResourceFetch from '@shell/mixins/resource-fetch';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
 
 export default {
   name:       'ListPersistentVolumeClaim',
-  components: { ResourceTable },
-  mixins:     [ResourceFetch],
+  components: { PaginatedResourceTable },
   props:      {
     resource: {
       type:     String,
@@ -24,21 +21,12 @@ export default {
     }
   },
 
-  async fetch() {
-    this.$initializeFetchData(this.resource);
-
-    this.$fetchType(STORAGE_CLASS);
-    await this.$fetchType(this.resource);
-  }
 };
 </script>
 
 <template>
-  <ResourceTable
-    :loading="loading"
+  <PaginatedResourceTable
     :schema="schema"
-    :rows="rows"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
   />
 </template>

package/list/service.vue

@@ -1,12 +1,10 @@
 <script>
-import ResourceTable from '@shell/components/ResourceTable';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
 import { NODE } from '@shell/config/types';
-import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListService',
-  components: { ResourceTable },
-  mixins:     [ResourceFetch],
+  components: { PaginatedResourceTable },
   props:      {
     resource: {
       type:     String,
@@ -24,30 +22,27 @@ export default {
     }
   },
 
-  // fetch nodes before loading this page, as they may be referenced in the Target table column
-  async fetch() {
-    const store = this.$store;
-    const inStore = store.getters['currentStore']();
-
-    this.$initializeFetchData(this.resource);
-
-    if (store.getters[`${ inStore }/schemaFor`](NODE)) {
-      this.$fetchType(NODE);
+  methods: {
+    /**
+     * opts: FetchSecondaryResourcesOpts
+     */
+    async fetchSecondaryResources(opts) {
+      const inStore = this.$store.getters['currentStore']();
+
+      if (this.$store.getters[`${ inStore }/schemaFor`](NODE)) {
+        // fetch nodes before loading this page, as they may be referenced in the Target table column
+        // shell/components/formatter/ServiceTargets.vue --> shell/components/formatter/Endpoints.vue --> Picks the first one that has a model's externalIp
+        await this.$store.dispatch(`${ inStore }/findAll`, { type: NODE });
+      }
     }
-
-    await this.$fetchType(this.resource);
   }
 };
 </script>
 
 <template>
-  <ResourceTable
+  <PaginatedResourceTable
     :schema="schema"
-    :rows="rows"
-    :headers="$attrs.headers"
-    :group-by="$attrs.groupBy"
-    :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+    :fetchSecondaryResources="fetchSecondaryResources"
   />
 </template>