@rancher/shell 3.0.1-rc.3 → 3.0.1

package/components/nav/TopLevelMenu.vue

@@ -4,18 +4,20 @@ import ClusterIconMenu from '@shell/components/ClusterIconMenu';
 import IconOrSvg from '../IconOrSvg';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 import { mapGetters } from 'vuex';
-import { CAPI, MANAGEMENT } from '@shell/config/types';
-import { MENU_MAX_CLUSTERS } from '@shell/store/prefs';
+import { CAPI, COUNT, MANAGEMENT } from '@shell/config/types';
+import { MENU_MAX_CLUSTERS, PINNED_CLUSTERS } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
 import { ucFirst } from '@shell/utils/string';
 import { KEY } from '@shell/utils/platform';
 import { getVersionInfo } from '@shell/utils/version';
 import { SETTING } from '@shell/config/settings';
-import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
 import { getProductFromRoute } from '@shell/utils/router';
 import { isRancherPrime } from '@shell/config/version';
 import Pinned from '@shell/components/nav/Pinned';
 import { getGlobalBannerFontSizes } from '@shell/utils/banners';
+import { TopLevelMenuHelperPagination, TopLevelMenuHelperLegacy } from '@shell/components/nav/TopLevelMenu.helper';
+import { debounce } from 'lodash';
+import { sameContents } from '@shell/utils/array';
 
 export default {
   components: {
@@ -29,6 +31,17 @@ export default {
     const { displayVersion, fullVersion } = getVersionInfo(this.$store);
     const hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
 
+    const canPagination = this.$store.getters[`management/paginationEnabled`]({
+      id:      MANAGEMENT.CLUSTER,
+      context: 'side-bar',
+    }) && this.$store.getters[`management/paginationEnabled`]({
+      id:      CAPI.RANCHER_CLUSTER,
+      context: 'side-bar',
+    });
+    const helper = canPagination ? new TopLevelMenuHelperPagination({ $store: this.$store }) : new TopLevelMenuHelperLegacy({ $store: this.$store });
+    const provClusters = !canPagination && hasProvCluster ? this.$store.getters[`management/all`](CAPI.RANCHER_CLUSTER) : [];
+    const mgmtClusters = !canPagination ? this.$store.getters[`management/all`](MANAGEMENT.CLUSTER) : [];
+
     return {
       shown:             false,
       displayVersion,
@@ -37,27 +50,26 @@ export default {
       hasProvCluster,
       maxClustersToShow: MENU_MAX_CLUSTERS,
       emptyCluster:      BLANK_CLUSTER,
-      showPinClusters:   false,
-      searchActive:      false,
       routeCombo:        false,
-    };
-  },
 
-  fetch() {
-    if (this.hasProvCluster) {
-      this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
-    }
+      canPagination,
+      helper,
+      debouncedHelperUpdateSlow:  debounce((...args) => this.helper.update(...args), 750),
+      debouncedHelperUpdateQuick: debounce((...args) => this.helper.update(...args), 200),
+      provClusters,
+      mgmtClusters,
+    };
   },
 
   computed: {
     ...mapGetters(['clusterId']),
     ...mapGetters(['clusterReady', 'isRancher', 'currentCluster', 'currentProduct', 'isRancherInHarvester']),
     ...mapGetters({ features: 'features/get' }),
-    value: {
-      get() {
-        return this.$store.getters['productId'];
-      },
+
+    pinnedIds() {
+      return this.$store.getters['prefs/get'](PINNED_CLUSTERS);
     },
+
     sideMenuStyle() {
       const globalBannerSettings = getGlobalBannerFontSizes(this.$store);
 
@@ -68,161 +80,47 @@ export default {
     },
 
     showClusterSearch() {
-      return this.clusters.length > this.maxClustersToShow;
+      return this.allClustersCount > this.maxClustersToShow;
     },
 
-    /**
-     * Filter mgmt clusters by
-     * 1. Harvester type 1 (filterOnlyKubernetesClusters)
-     * 2. Harvester type 2 (filterHiddenLocalCluster)
-     * 3. There's a matching prov cluster
-     *
-     * Convert remaining clusters to special format
-     */
-    clusters() {
-      if (!this.hasProvCluster) {
-        // We're filtering out mgmt clusters without prov clusters, so if the user can't see any prov clusters at all
-        // exit early
-        return [];
-      }
-
-      const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
-      const mgmtClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store);
-      const provClusters = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
-      const provClustersByMgmtId = provClusters.reduce((res, provCluster) => {
-        if (provCluster.mgmt?.id) {
-          res[provCluster.mgmt.id] = provCluster;
-        }
+    allClustersCount() {
+      const counts = this.$store.getters[`management/all`](COUNT)?.[0]?.counts || {};
+      const count = counts[MANAGEMENT.CLUSTER] || {};
 
-        return res;
-      }, {});
+      return count?.summary.count;
+    },
 
-      return (mgmtClusters || []).reduce((res, mgmtCluster) => {
-        // Filter to only show mgmt clusters that exist for the available provisioning clusters
-        // Addresses issue where a mgmt cluster can take some time to get cleaned up after the corresponding
-        // provisioning cluster has been deleted
-        if (!provClustersByMgmtId[mgmtCluster.id]) {
-          return res;
-        }
+    // New
+    search() {
+      return (this.clusterFilter || '').toLowerCase();
+    },
 
-        const pCluster = provClustersByMgmtId[mgmtCluster.id];
-
-        res.push({
-          id:              mgmtCluster.id,
-          label:           mgmtCluster.nameDisplay,
-          ready:           mgmtCluster.isReady && !pCluster?.hasError,
-          osLogo:          mgmtCluster.providerOsLogo,
-          providerNavLogo: mgmtCluster.providerMenuLogo,
-          badge:           mgmtCluster.badge,
-          isLocal:         mgmtCluster.isLocal,
-          isHarvester:     mgmtCluster.isHarvester,
-          pinned:          mgmtCluster.pinned,
-          description:     pCluster?.description || mgmtCluster.description,
-          pin:             () => mgmtCluster.pin(),
-          unpin:           () => mgmtCluster.unpin(),
-          clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: mgmtCluster.id } }
-        });
+    // New
+    showPinClusters() {
+      return !this.clusterFilter;
+    },
 
-        return res;
-      }, []);
+    // New
+    searchActive() {
+      return !!this.search;
     },
 
     /**
-     * Filter clusters by
-     * 1. Not pinned
-     * 2. Includes search term
-     *
-     * Sort remaining clusters
+     * Only Clusters that are pinned
      *
-     * Reduce number of clusters if too many too show
-     *
-     * Important! This is used to show unpinned clusters OR results of search
+     * (see description of helper.clustersPinned for more details)
      */
-    clustersFiltered() {
-      const search = (this.clusterFilter || '').toLowerCase();
-      let localCluster = null;
-
-      const filtered = this.clusters.filter((c) => {
-        // If we're searching we don't care if pinned or not
-        if (search) {
-          if (!c.label?.toLowerCase().includes(search)) {
-            return false;
-          }
-        } else if (c.pinned) {
-          // Not searching, not pinned, don't care
-          return false;
-        }
-
-        if (!localCluster && c.id === 'local') {
-          // Local cluster is a special case, we're inserting it at top so don't include in the middle
-          localCluster = c;
-
-          return false;
-        }
-
-        return true;
-      });
-
-      const sorted = sortBy(filtered, ['ready:desc', 'label']);
-
-      // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975
-      if (localCluster) {
-        sorted.unshift(localCluster);
-      }
-
-      if (search) {
-        this.showPinClusters = false;
-        this.searchActive = !sorted.length > 0;
-
-        return sorted;
-      }
-      this.showPinClusters = true;
-      this.searchActive = false;
-
-      if (sorted.length >= this.maxClustersToShow) {
-        return sorted.slice(0, this.maxClustersToShow);
-      }
-
-      return sorted;
+    pinFiltered() {
+      return this.hasProvCluster ? this.helper.clustersPinned : [];
     },
 
     /**
-     * Filter clusters by
-     * 1. Not pinned
-     * 2. Includes search term
-     *
-     * Sort remaining clusters
+     * Used to shown unpinned clusters OR results of text search
      *
-     * Reduce number of clusters if too many too show
-     *
-     * Important! This is hidden if there's a filter (user searching)
+     * (see description of helper.clustersOthers for more details)
      */
-    pinFiltered() {
-      let localCluster = null;
-      const filtered = this.clusters.filter((c) => {
-        if (!c.pinned) {
-          // We only care about pinned clusters
-          return false;
-        }
-
-        if (c.id === 'local') {
-          // Special case, we're going to add this at the start so filter out
-          localCluster = c;
-
-          return false;
-        }
-
-        return true;
-      });
-
-      const sorted = sortBy(filtered, ['ready:desc', 'label']);
-
-      // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975
-      if (localCluster) {
-        sorted.unshift(localCluster);
-      }
-
-      return sorted;
+    clustersFiltered() {
+      return this.hasProvCluster ? this.helper.clustersOthers : [];
     },
 
     pinnedClustersHeight() {
@@ -232,7 +130,7 @@ export default {
       return `min-height: ${ height }px`;
     },
     clusterFilterCount() {
-      return this.clusterFilter ? this.clustersFiltered.length : this.clusters.length;
+      return this.clusterFilter ? this.clustersFiltered.length : this.allClustersCount;
     },
 
     multiClusterApps() {
@@ -360,10 +258,45 @@ export default {
     }
   },
 
+  // See https://github.com/rancher/dashboard/issues/12831 for outstanding performance related work
   watch: {
     $route() {
       this.shown = false;
-    }
+    },
+
+    pinnedIds: {
+      immediate: true,
+      handler(neu, old) {
+        if (sameContents(neu, old)) {
+          return;
+        }
+
+        this.updateClusters(neu, 'quick');
+      }
+    },
+
+    search() {
+      this.updateClusters(this.pinnedIds, 'slow');
+    },
+
+    provClusters: {
+      handler() {
+        // Shouldn't get here if SSP
+        this.updateClusters(this.pinnedIds, 'slow');
+      },
+      deep:      true,
+      immediate: true,
+    },
+
+    mgmtClusters: {
+      handler() {
+        // Shouldn't get here if SSP
+        this.updateClusters(this.pinnedIds, 'slow');
+      },
+      deep:      true,
+      immediate: true,
+    },
+
   },
 
   mounted() {
@@ -490,9 +423,27 @@ export default {
         popperClass
       };
     },
+
+    updateClusters(pinnedIds, speed = 'slow' | 'quick') {
+      const args = {
+        pinnedIds,
+        searchTerm:  this.search,
+        unPinnedMax: this.maxClustersToShow
+      };
+
+      switch (speed) {
+      case 'slow':
+        this.debouncedHelperUpdateSlow(args);
+        break;
+      case 'quick':
+        this.debouncedHelperUpdateQuick(args);
+        break;
+      }
+    }
   }
 };
 </script>
+
 <template>
   <div>
     <!-- Overlay -->
@@ -514,7 +465,12 @@ export default {
         <div class="title">
           <div
             data-testid="top-level-menu"
+            :aria-label="t('nav.expandCollapseAppBar')"
+            role="button"
+            tabindex="0"
             class="menu"
+            @keyup.enter="toggle()"
+            @keyup.space="toggle()"
             @click="toggle()"
           >
             <svg
@@ -632,7 +588,7 @@ export default {
           </template>
 
           <!-- Cluster menu -->
-          <template v-if="clusters && !!clusters.length">
+          <template v-if="!!allClustersCount">
             <div
               ref="clusterList"
               class="clusters"
@@ -790,7 +746,7 @@ export default {
 
               <!-- No clusters message -->
               <div
-                v-if="(clustersFiltered.length === 0 || pinFiltered.length === 0) && searchActive"
+                v-if="clustersFiltered.length === 0 && searchActive"
                 data-testid="top-level-menu-no-results"
                 class="none-matching"
               >
@@ -800,7 +756,7 @@ export default {
 
             <!-- See all clusters -->
             <router-link
-              v-if="clusters.length > maxClustersToShow"
+              v-if="allClustersCount > maxClustersToShow"
               class="clusters-all"
               :to="{name: 'c-cluster-product-resource', params: {
                 cluster: emptyCluster,
@@ -972,6 +928,15 @@ export default {
       align-items: center;
       justify-content: center;
 
+      &:focus-visible {
+        outline: none;
+
+        .menu-icon {
+          @include focus-outline;
+          outline-offset: 4px;  // Ensure there is space around the menu icon for the focus indication
+        }
+      }
+
       .menu-icon {
         width: 25px;
         height: 25px;
@@ -1119,7 +1084,7 @@ export default {
           display: block;
           font-size: $icon-size;
           margin-right: 14px;
-          &.group-icon {
+          &:not(.pin){
             width: 42px;
           }
         }

package/components/nav/WindowManager/ContainerShell.vue

@@ -14,6 +14,7 @@ import Socket, {
   EVENT_CONNECT_ERROR,
 } from '@shell/utils/socket';
 import Window from './Window';
+import dayjs from 'dayjs';
 
 const commands = {
   linux: [
@@ -287,7 +288,7 @@ export default {
 
         // If we had an error message, try connecting with the next command
         if (this.errorMsg) {
-          this.terminal.write(this.errorMsg);
+          this.terminal.writeln(this.errorMsg);
           if (this.backupShells.length && this.retries < 2) {
             this.retries++;
             // we're not really counting on this being a reactive change so there's no need to fire the whole action
@@ -299,7 +300,9 @@ export default {
             this.connect();
           } else {
             // Output an message to let he user know none of the shell commands worked
-            this.terminal.write(this.t('wm.containerShell.failed'));
+            const timestamp = dayjs().format('YYYY-MM-DD HH:mm:ss');
+
+            this.terminal.writeln(`[${ timestamp }] ${ this.t('wm.containerShell.logLevel.info') }: ${ this.t('wm.containerShell.failed') }`);
           }
         }
       });
@@ -317,10 +320,16 @@ export default {
           }
           this.terminal.write(msg);
         } else {
-          console.error(msg); // eslint-disable-line no-console
+          const timestamp = dayjs().format('YYYY-MM-DD HH:mm:ss');
+          let customError = `[${ timestamp }] ${ this.t('wm.containerShell.logLevel.error') }: ${ this.container }: ${ msg }`;
+
+          if (msg.includes('stat /bin/sh: no such file or directory')) {
+            customError = `[${ timestamp }] ${ this.t('wm.containerShell.logMessage.containerError', { logLevel: this.t('wm.containerShell.logLevel.error') }) }: ${ msg }`;
+          }
+          console.error(customError); // eslint-disable-line no-console
 
           if (`${ type }` === '3') {
-            this.errorMsg = msg;
+            this.errorMsg = customError;
           }
         }
       });

package/components/nav/WindowManager/__tests__/ContainerShell.test.ts

@@ -29,6 +29,7 @@ describe('component: ContainerShell', () => {
     return { rows: 1 };
   });
   const write = jest.fn();
+  const writeln = jest.fn();
   const reset = jest.fn();
 
   jest.mock(/* webpackChunkName: "xterm" */ 'xterm', () => {
@@ -39,6 +40,7 @@ describe('component: ContainerShell', () => {
         open = open;
         focus = focus;
         write = write;
+        writeln = writeln;
         reset = reset
       }
     };
@@ -277,10 +279,10 @@ describe('component: ContainerShell', () => {
     eventConnected();
     eventMessage({ detail: { data: `3${ errorMessage }` } });
 
-    expect(consoleError.mock.calls[0][0]).toBe(errorMessage);
+    expect(consoleError.mock.calls[0][0]).toContain(errorMessage);
     expect(wrapper.vm.isOpen).toBe(true);
     expect(wrapper.vm.isOpening).toBe(false);
-    expect(wrapper.vm.errorMsg).toBe(errorMessage);
+    expect(wrapper.vm.errorMsg).toContain(errorMessage);
     expect(wrapper.vm.os).toBe('linux');
   });
 
@@ -325,10 +327,10 @@ describe('component: ContainerShell', () => {
 
     eventDisconnected();
 
-    expect(consoleError.mock.calls[0][0]).toBe(errorMessage);
+    expect(consoleError.mock.calls[0][0]).toContain(errorMessage);
     expect(wrapper.vm.isOpen).toBe(false);
     expect(wrapper.vm.isOpening).toBe(false);
-    expect(wrapper.vm.errorMsg).toBe('eventMessageError');
+    expect(wrapper.vm.errorMsg).toContain('eventMessageError');
     // the backup shell that was leftover was windows so it became the new os in dataprops
     expect(wrapper.vm.os).toBeUndefined();
     // but we still didn't write it to the pod itself since we don't know if it worked
@@ -370,11 +372,11 @@ describe('component: ContainerShell', () => {
     eventMessage({ detail: { data: `3${ windowsErrorMessage }` } });
     eventDisconnected();
 
-    expect(consoleError.mock.calls[0][0]).toBe(linuxErrorMessage);
-    expect(consoleError.mock.calls[1][0]).toBe(windowsErrorMessage);
+    expect(consoleError.mock.calls[0][0]).toContain(linuxErrorMessage);
+    expect(consoleError.mock.calls[1][0]).toContain(windowsErrorMessage);
     expect(wrapper.vm.isOpen).toBe(false);
     expect(wrapper.vm.isOpening).toBe(false);
-    expect(wrapper.vm.errorMsg).toBe(windowsErrorMessage);
+    expect(wrapper.vm.errorMsg).toContain(windowsErrorMessage);
     expect(wrapper.vm.os).toBeUndefined();
     // we never found a shell that worked so we're going to leave the pod os as undefined
     expect(defaultContainerShellParams.propsData.pod.os).toBeUndefined();
@@ -426,11 +428,11 @@ describe('component: ContainerShell', () => {
     eventMessage({ detail: { data: `3${ windowsErrorMessage }` } });
     eventDisconnected();
 
-    expect(consoleError.mock.calls[0][0]).toBe(linuxErrorMessage);
-    expect(consoleError.mock.calls[1][0]).toBe(windowsErrorMessage);
+    expect(consoleError.mock.calls[0][0]).toContain(linuxErrorMessage);
+    expect(consoleError.mock.calls[1][0]).toContain(windowsErrorMessage);
     expect(wrapper.vm.isOpen).toBe(false);
     expect(wrapper.vm.isOpening).toBe(false);
-    expect(wrapper.vm.errorMsg).toBe(windowsErrorMessage);
+    expect(wrapper.vm.errorMsg).toContain(windowsErrorMessage);
     expect(wrapper.vm.os).toBeUndefined();
     expect(testUndefinedOsParams.propsData.pod.os).toBeUndefined();
     expect(connect.mock.calls).toHaveLength(3);
@@ -472,13 +474,13 @@ describe('component: ContainerShell', () => {
     expect(wrapper.vm.backupShells).toHaveLength(1);
     expect(wrapper.vm.os).toBeUndefined();
     expect(testUndefinedOsParams.propsData.pod.os).toBeUndefined();
-    expect(wrapper.vm.errorMsg).toBe(linuxErrorMessage);
+    expect(wrapper.vm.errorMsg).toContain(linuxErrorMessage);
 
     eventConnecting();
     eventConnected();
     eventMessage({ detail: { data: `1${ windowsShellMessage }` } });
 
-    expect(consoleError.mock.calls[0][0]).toBe(linuxErrorMessage);
+    expect(consoleError.mock.calls[0][0]).toContain(linuxErrorMessage);
     expect(consoleError.mock.calls[1]).toBeUndefined();
     expect(wrapper.vm.isOpen).toBe(true);
     expect(wrapper.vm.isOpening).toBe(false);
@@ -532,7 +534,7 @@ describe('component: ContainerShell', () => {
     expect(wrapper.vm.backupShells).toHaveLength(1);
     expect(wrapper.vm.os).toBe('linux');
     expect(testNodeDefinedOsParams.propsData.pod.os).toBe('linux');
-    expect(wrapper.vm.errorMsg).toBe(linuxErrorMessage);
+    expect(wrapper.vm.errorMsg).toContain(linuxErrorMessage);
 
     eventConnecting();
     eventConnected();
@@ -542,7 +544,7 @@ describe('component: ContainerShell', () => {
     expect(wrapper.vm.backupShells).toHaveLength(1);
     expect(wrapper.vm.isOpen).toBe(false);
     expect(wrapper.vm.isOpening).toBe(false);
-    expect(wrapper.vm.errorMsg).toBe(linuxErrorMessage);
+    expect(wrapper.vm.errorMsg).toContain(linuxErrorMessage);
     expect(wrapper.vm.os).toBe('linux');
     expect(testNodeDefinedOsParams.propsData.pod.os).toBe('linux');
     expect(connect.mock.calls).toHaveLength(3);
@@ -552,13 +554,13 @@ describe('component: ContainerShell', () => {
     eventMessage({ detail: { data: `3${ linuxErrorMessage }` } });
     eventDisconnected();
 
-    expect(consoleError.mock.calls[0][0]).toBe(linuxErrorMessage);
-    expect(consoleError.mock.calls[1][0]).toBe(linuxErrorMessage);
-    expect(consoleError.mock.calls[2][0]).toBe(linuxErrorMessage);
+    expect(consoleError.mock.calls[0][0]).toContain(linuxErrorMessage);
+    expect(consoleError.mock.calls[1][0]).toContain(linuxErrorMessage);
+    expect(consoleError.mock.calls[2][0]).toContain(linuxErrorMessage);
     expect(wrapper.vm.backupShells).toHaveLength(1);
     expect(wrapper.vm.isOpen).toBe(false);
     expect(wrapper.vm.isOpening).toBe(false);
-    expect(wrapper.vm.errorMsg).toBe(linuxErrorMessage);
+    expect(wrapper.vm.errorMsg).toContain(linuxErrorMessage);
     expect(wrapper.vm.os).toBe('linux');
     expect(testNodeDefinedOsParams.propsData.pod.os).toBe('linux');
     // at some point we have to stop retying and if we're not burning through backup shells, there's a retry limit of 2 for a total of 3 attempts