@rancher/shell 3.0.1 → 3.0.2-rc.2

package/list/workload.vue

@@ -4,9 +4,9 @@ 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';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
 
-const schema = {
+const workloadSchema = {
   id:         'workload',
   type:       SCHEMA,
   attributes: {
@@ -26,7 +26,7 @@ const $loadingResources = ($route, $store) => {
     }
   });
 
-  const allTypes = $route.params.resource === schema.id;
+  const allTypes = $route.params.resource === workloadSchema.id;
 
   return {
     loadResources:     allTypes ? allowedResources : [$route.params.resource],
@@ -36,7 +36,7 @@ const $loadingResources = ($route, $store) => {
 
 export default {
   name:       'ListWorkload',
-  components: { ResourceTable },
+  components: { ResourceTable, PaginatedResourceTable },
   mixins:     [ResourceFetch],
 
   props: {
@@ -47,6 +47,10 @@ export default {
   },
 
   async fetch() {
+    if (this.paginationEnabled) {
+      return;
+    }
+
     if (this.allTypes && this.loadResources.length) {
       this.$initializeFetchData(this.loadResources[0], this.loadResources);
     } else {
@@ -57,6 +61,7 @@ export default {
       const schema = this.$store.getters[`cluster/schemaFor`](NODE);
 
       if (schema) {
+        // Used for shell/components/formatter/Endpoints.vue (too see column page needs to be wide and per page setting 25 or under)
         this.$fetchType(NODE);
       }
     } catch {}
@@ -82,7 +87,15 @@ export default {
     // Ensure these are set on load (to determine if the NS filter is required) rather than too late on `fetch`
     const { loadResources, loadIndeterminate } = $loadingResources(this.$route, this.$store);
 
+    const { params:{ resource: type } } = this.$route;
+    const allTypes = this.$route.params.resource === workloadSchema.id;
+    const schema = type !== workloadSchema.id ? this.$store.getters['cluster/schemaFor'](type) : workloadSchema;
+    const paginationEnabled = !allTypes && this.$store.getters[`cluster/paginationEnabled`]?.({ id: type });
+
     return {
+      allTypes,
+      schema,
+      paginationEnabled,
       resources: [],
       loadResources,
       loadIndeterminate
@@ -90,24 +103,6 @@ export default {
   },
 
   computed: {
-    allTypes() {
-      return this.$route.params.resource === schema.id;
-    },
-
-    paginationEnabled() {
-      return !this.allTypes && this.$store.getters[`cluster/paginationEnabled`]();
-    },
-
-    schema() {
-      const { params:{ resource:type } } = this.$route;
-
-      if (type !== schema.id) {
-        return this.$store.getters['cluster/schemaFor'](type);
-      }
-
-      return schema;
-    },
-
     filteredRows() {
       const out = [];
 
@@ -127,14 +122,7 @@ export default {
     },
 
     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;
+      return this.$store.getters['type-map/headersFor'](this.schema, false);
     }
   },
 
@@ -171,27 +159,25 @@ export default {
     }
   },
 
-  typeDisplay() {
-    const { params:{ resource:type } } = this.$route;
-    let paramSchema = schema;
-
-    if (type !== schema.id) {
-      paramSchema = this.$store.getters['cluster/schemaFor'](type);
-    }
-
-    return this.$store.getters['type-map/labelFor'](paramSchema, 99);
-  },
 };
 </script>
 
 <template>
-  <ResourceTable
-    :loading="$fetchState.pending"
-    :schema="schema"
-    :headers="headers"
-    :rows="filteredRows"
-    :overflow-y="true"
-    :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
-  />
+  <div>
+    <PaginatedResourceTable
+      v-if="paginationEnabled"
+      :schema="schema"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    />
+    <ResourceTable
+      v-else
+      :loading="$fetchState.pending"
+      :schema="schema"
+      :headers="headers"
+      :rows="filteredRows"
+      :overflow-y="true"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+    />
+  </div>
 </template>

package/mixins/resource-fetch.js

@@ -52,6 +52,7 @@ export default {
       incremental:                false,
       fetchedResourceType:        [],
       paginating:                 null,
+      isFirstLoad:                true,
     };
   },
 
@@ -110,7 +111,7 @@ export default {
 
     loading() {
       if (this.canPaginate) {
-        return this.paginating;
+        return this.paginating === null ? true : this.paginating;
       }
 
       return this.rows.length ? false : this.$fetchState.pending;
@@ -128,6 +129,12 @@ export default {
           });
         }
       }
+    },
+
+    loading(newValue, oldValue) {
+      if (oldValue && !newValue) {
+        this.isFirstLoad = false;
+      }
     }
   },
 

package/mixins/vue-select-overrides.js

@@ -1,5 +1,8 @@
 
 export default {
+  data() {
+    return { overridesMixinPreventDoubleTriggerKeysOpen: false };
+  },
   methods: {
     mappedKeys(map, vm) {
       // Defaults found at - https://github.com/sagalbot/vue-select/blob/master/src/components/Select.vue#L947
@@ -13,31 +16,19 @@ export default {
         }
 
         e.preventDefault();
-
-        const optsLen = vm.filteredOptions.length;
-        const typeAheadPointer = vm.typeAheadPointer;
-
-        if (e.shiftKey) {
-          if (typeAheadPointer === 0) {
-            return vm.onEscape();
-          }
-
-          return vm.typeAheadUp();
-        }
-        if (typeAheadPointer + 1 === optsLen) {
-          return vm.onEscape();
-        }
-
-        return vm.typeAheadDown();
       });
 
+      // escape
       (out[27] = (e) => {
         vm.open = false;
         vm.search = '';
 
+        this.$refs.select.focus();
+
         return false;
       });
 
+      // enter
       (out[13] = (e, opt) => {
         if (!vm.open) {
           vm.open = true;
@@ -60,6 +51,9 @@ export default {
           vm.$emit('option:selected', option);
 
           if (vm.closeOnSelect) {
+            // this ties in to the Select component implementation
+            // so that the enter key handler doesn't open the dropdown again
+            this.overridesMixinPreventDoubleTriggerKeysOpen = true;
             vm.open = false;
             vm.typeAheadPointer = -1;
           }

package/models/management.cattle.io.cluster.js

@@ -296,6 +296,11 @@ export default class MgmtCluster extends SteveModel {
     return this.providerLogo;
   }
 
+  // Color to use as the underline for the icon in the app bar
+  get iconColor() {
+    return this.metadata?.annotations[CLUSTER_BADGE.COLOR];
+  }
+
   // Custom badge to show for the Cluster (if the appropriate annotations are set)
   get badge() {
     const icon = this.metadata?.annotations?.[CLUSTER_BADGE.ICON_TEXT];
@@ -305,7 +310,7 @@ export default class MgmtCluster extends SteveModel {
       return undefined;
     }
 
-    let color = this.metadata?.annotations[CLUSTER_BADGE.COLOR] || DEFAULT_BADGE_COLOR;
+    let color = this.iconColor || DEFAULT_BADGE_COLOR;
     const iconText = this.metadata?.annotations[CLUSTER_BADGE.ICON_TEXT] || '';
     let foregroundColor;
 

package/models/persistentvolume.js

@@ -30,9 +30,7 @@ export default class PV extends SteveModel {
       return null;
     }
 
-    const allClaims = this.$rootGetters['cluster/all'](PVC);
-
-    return allClaims.find((claim) => claim.spec.volumeName === this.name);
+    return this.$getters['all'](PVC).find((claim) => claim.spec.volumeName === this.name);
   }
 
   get claimName() {

package/models/storage.k8s.io.storageclass.js

@@ -82,6 +82,10 @@ export const PROVISIONER_OPTIONS = [
 ];
 
 export default class extends SteveModel {
+  get provisionerListDisplay() {
+    return `${ this.provisioner } (${ this.provisionerDisplay })`;
+  }
+
   get provisionerDisplay() {
     const option = PROVISIONER_OPTIONS.find((o) => o.value === this.provisioner);
     const fallback = `${ this.provisioner } ${ this.t('persistentVolume.csi.suffix') }`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.1",
+  "version": "3.0.2-rc.2",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -36,57 +36,57 @@
     "@babel/plugin-proposal-private-property-in-object": "7.14.5",
     "@babel/preset-typescript": "7.16.7",
     "@novnc/novnc": "1.2.0",
-    "@popperjs/core": "2.4.4",
+    "@popperjs/core": "2.11.8",
     "@rancher/icons": "2.0.29",
     "@types/is-url": "1.2.30",
     "@types/node": "20.10.8",
     "@types/semver": "^7.5.8",
-    "@typescript-eslint/eslint-plugin": "~5.4.0",
-    "@typescript-eslint/parser": "~5.4.0",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-typescript": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "@vue/test-utils": "~2.0.0-0",
-    "@vue/vue3-jest": "^27.0.0-alpha.1",
+    "@vue/cli-service": "5.0.8",
+    "@vue/test-utils": "2.4.6",
+    "@vue/vue3-jest": "27.0.0",
     "add": "2.0.6",
     "ansi_up": "5.0.0",
-    "axios": "0.21.4",
     "axios-retry": "3.1.9",
+    "axios": "0.21.4",
     "babel-eslint": "10.1.0",
     "babel-plugin-module-resolver": "4.0.0",
     "babel-preset-vue": "2.0.2",
     "cache-loader": "4.1.0",
     "clipboard-polyfill": "4.0.1",
-    "color": "4.2.3",
+    "codemirror-editor-vue3": "2.8.0",
     "codemirror": ">=5.64.0 <6",
-    "codemirror-editor-vue3": "2.7.1",
-    "cookie": "0.7.0",
+    "color": "4.2.3",
     "cookie-universal": "2.2.2",
-    "core-js": "3.25.3",
+    "cookie": "0.7.0",
+    "core-js": "3.40.0",
     "cron-validator": "1.3.1",
     "cronstrue": "2.50.0",
-    "cross-env": "6.0.3",
+    "cross-env": "7.0.3",
     "css-loader": "6.7.3",
     "csv-loader": "3.0.3",
     "custom-event-polyfill": "^1.0.7",
-    "cypress": "10.3.1",
-    "d3": "7.3.0",
+    "cypress": "11.1.0",
     "d3-selection": "1.4.1",
-    "dagre-d3": "0.6.4",
+    "d3": "7.3.0",
     "dayjs": "1.8.29",
     "defu": "5.0.1",
     "diff2html": "3.4.24",
     "dompurify": "2.5.4",
     "element-matches": "^0.1.2",
-    "eslint": "7.32.0",
+    "entities": "4.5.0",
     "eslint-config-standard": "16.0.3",
     "eslint-import-resolver-node": "0.3.4",
     "eslint-module-utils": "2.6.1",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jest": "24.4.0",
     "eslint-plugin-n": "15.2.0",
     "eslint-plugin-vue": "9.10.0",
+    "eslint": "7.32.0",
     "event-target-shim": "5.0.1",
     "express": "4.17.1",
     "file-saver": "2.0.2",
@@ -96,26 +96,26 @@
     "intl-messageformat": "7.8.4",
     "ip": "2.0.1",
     "is-url": "1.2.4",
-    "jest": "27.5.1",
     "jest-serializer-vue": "2.0.2",
-    "jexl": "2.2.2",
+    "jexl": "2.3.0",
+    "jest": "27.5.1",
     "jquery": "3.5.1",
     "js-cookie": "2.2.1",
-    "js-yaml": "4.1.0",
     "js-yaml-loader": "1.2.2",
+    "js-yaml": "4.1.0",
     "jsdiff": "1.1.1",
     "jsonpath-plus": "10.0.7",
-    "jsrsasign": "10.5.25",
+    "jsrsasign": "11.0.0",
     "jszip": "3.8.0",
     "lodash": "4.17.21",
     "marked": "4.0.17",
+    "node-polyfill-webpack-plugin": "3.0.0",
     "nodemon": "2.0.22",
     "nyc": "15.1.0",
-    "node-polyfill-webpack-plugin": "3.0.0",
     "papaparse": "5.3.0",
     "portal-vue": "~3.0.0",
-    "sass": "1.51.0",
-    "sass-loader": "~12.0.0",
+    "sass-loader": "12.6.0",
+    "sass": "1.83.1",
     "serve-static": "1.14.1",
     "set-cookie-parser": "2.4.6",
     "shell-quote": "1.7.3",
@@ -127,23 +127,23 @@
     "ufo": "0.7.11",
     "unfetch": "4.2.0",
     "url-parse": "1.5.10",
-    "vue": "~3.2.13",
-    "vue-router": "4.4.3",
+    "vue-router": "4.5.0",
     "vue-select": "4.0.0-beta.6",
     "vue-server-renderer": "2.7.16",
+    "vue": "^3.2.13",
     "vue3-resize": "0.2.0",
     "vue3-virtual-scroll-list": "0.2.1",
     "vuedraggable": "4.1.0",
-    "vuex": "~4.0.0",
+    "vuex": "4.1.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-virtual-modules": "0.4.3",
     "worker-loader": "3.0.8",
-    "xterm": "5.2.1",
     "xterm-addon-canvas": "0.5.0",
     "xterm-addon-fit": "0.8.0",
     "xterm-addon-search": "0.13.0",
     "xterm-addon-web-links": "0.9.0",
     "xterm-addon-webgl": "0.16.0",
+    "xterm": "5.2.1",
     "yarn": "1.22.18"
   },
   "resolutions": {

package/pages/c/_cluster/explorer/EventsTable.vue

@@ -1,16 +1,14 @@
 <script>
 
-import SortableTable from '@shell/components/SortableTable';
 import { MESSAGE, NAME, OBJECT, REASON } from '@shell/config/table-headers';
 import { EVENT } from '@shell/config/types';
-import { fetchClusterResources } from './explorer-utils';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
+import { STEVE_EVENT_OBJECT, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
+import { headerFromSchemaColString } from '@shell/store/type-map.utils';
+import { NAME as EXPLORER } from '@shell/config/product/explorer';
 
 export default {
-  components: { SortableTable },
-
-  async fetch() {
-    this.events = await fetchClusterResources(this.$store, EVENT);
-  },
+  components: { PaginatedResourceTable },
 
   data() {
     const reason = {
@@ -23,8 +21,7 @@ export default {
       reason,
       OBJECT,
       MESSAGE,
-      NAME,
-      {
+      NAME, {
         name:        'date',
         label:       'Date',
         labelKey:    'clusterIndexPage.sections.events.date.label',
@@ -36,9 +33,36 @@ export default {
       },
     ];
 
+    const schema = this.$store.getters['cluster/schemaFor'](EVENT);
+
+    const paginationHeaders = [
+      reason,
+      STEVE_EVENT_OBJECT,
+      MESSAGE,
+      {
+        ...STEVE_NAME_COL,
+        defaultSort: false,
+      },
+      headerFromSchemaColString('First Seen', schema, this.$store.getters, true),
+      {
+        ...headerFromSchemaColString('Last Seen', schema, this.$store.getters, true),
+        defaultSort: true,
+      },
+      headerFromSchemaColString('Count', schema, this.$store.getters, true),
+    ];
+
     return {
-      events: [],
+      schema,
+      events:        [],
       eventHeaders,
+      paginationHeaders,
+      allEventsLink: {
+        name:   'c-cluster-product-resource',
+        params: {
+          product:  EXPLORER,
+          resource: EVENT,
+        }
+      }
     };
   },
 
@@ -63,16 +87,34 @@ export default {
 </script>
 
 <template>
-  <SortableTable
-    :loading="$fetchState.pending"
-    :rows="events"
+  <PaginatedResourceTable
+    :schema="schema"
     :headers="eventHeaders"
+    :pagination-headers="paginationHeaders"
+
     key-field="id"
     :search="false"
     :table-actions="false"
     :row-actions="false"
-    :paging="true"
+    :groupable="false"
     :rows-per-page="10"
-    default-sort-by="date"
-  />
+  >
+    <template v-slot:header-right>
+      <router-link
+        data-testid="events-link"
+        :to="allEventsLink"
+        class="events-link"
+      >
+        <span>{{ t('glance.eventsTable') }}</span>
+      </router-link>
+    </template>
+  </PaginatedResourceTable>
 </template>
+
+<style lang="scss" scoped>
+.events-link {
+  align-self: center;
+  padding-right: 20px;
+  min-width: 200px;
+}
+</style>

package/pages/c/_cluster/explorer/index.vue

@@ -155,6 +155,7 @@ export default {
       clusterCounts,
       selectedTab:        'cluster-events',
       extensionCards:     getApplicableExtensionEnhancements(this, ExtensionPoint.CARD, CardLocation.CLUSTER_DASHBOARD_CARD, this.$route),
+      canViewEvents:      !!this.$store.getters['cluster/schemaFor'](EVENT),
       clusterServiceIcons,
     };
   },
@@ -473,16 +474,6 @@ export default {
       return !!this.currentCluster?.spec?.description;
     },
 
-    allEventsLink() {
-      return {
-        name:   'c-cluster-product-resource',
-        params: {
-          product:  EXPLORER,
-          resource: EVENT,
-        }
-      };
-    },
-
     allSecretsLink() {
       return {
         name:   'c-cluster-product-resource',
@@ -785,15 +776,11 @@ export default {
     <div class="mt-30">
       <Tabbed @changed="tabChange">
         <Tab
+          v-if="canViewEvents"
           name="cluster-events"
           :label="t('clusterIndexPage.sections.events.label')"
           :weight="2"
         >
-          <span class="events-table-link">
-            <router-link :to="allEventsLink">
-              <span>{{ t('glance.eventsTable') }}</span>
-            </router-link>
-          </span>
           <EventsTable />
         </Tab>
         <Tab
@@ -954,7 +941,7 @@ export default {
   }
 }
 
-.events-table-link, .cert-table-link {
+.cert-table-link {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 20px;