@rancher/shell 3.0.1 → 3.0.2-rc.2

package/components/formatter/Endpoints.vue

@@ -27,7 +27,7 @@ export default {
       const nodeWithExternal = nodes.find((node) => !!node.externalIp) || {};
       const externalIp = nodeWithExternal.externalIp;
 
-      if ( this.value && this.value.length ) {
+      if ( this.value?.length ) {
         let out ;
 
         try {

package/components/formatter/LiveExpiryDate.vue

@@ -12,6 +12,10 @@ export default {
       type:    Object,
       default: () => {}
     },
+    missingKey: {
+      type:    String,
+      default: 'generic.never',
+    }
   },
 
   data() {
@@ -77,7 +81,7 @@ export default {
   />
   <span
     v-else
-    v-t="'generic.never'"
+    v-t="missingKey"
     class="text-muted"
   />
 </template>

package/components/formatter/ServiceTargets.vue

@@ -95,7 +95,7 @@ export default {
     },
   },
 };
-</script>>
+</script>
 
 <template>
   <div>

package/components/formatter/ServiceType.vue

@@ -17,28 +17,30 @@ export default {
     },
   },
   data() {
-    const { row } = this;
-    let cloned = this.value.toLowerCase();
+    const cloned = this.getLabel(this.value.toLowerCase());
+    const headless = this.value === 'ClusterIP' && this.row?.spec?.clusterIP === 'None' ? this.getLabel('headless') : undefined;
 
-    if (this.value === 'ClusterIP' && row?.spec?.clusterIP === 'None') {
-      cloned = 'headless';
-    }
+    return { translated: cloned, headless };
+  },
 
-    const match = DEFAULT_SERVICE_TYPES.find((s) => s.id.toLowerCase() === cloned);
-    const translationLabel = match?.label;
-    let translated;
+  methods: {
+    getLabel(type) {
+      const match = DEFAULT_SERVICE_TYPES.find((s) => s.id.toLowerCase() === type);
+      const translationLabel = match?.label;
+      let translated;
 
-    if (translationLabel && this.$store.getters['i18n/exists'](translationLabel)) {
-      translated = this.$store.getters['i18n/t'](translationLabel);
-    } else {
-      translated = this.value;
-    }
+      if (translationLabel && this.$store.getters['i18n/exists'](translationLabel)) {
+        translated = this.$store.getters['i18n/t'](translationLabel);
+      } else {
+        translated = this.value;
+      }
 
-    return { translated };
-  },
+      return translated;
+    }
+  }
 };
-</script>>
+</script>
 
 <template>
-  <span>{{ translated }}</span>
+  <span>{{ translated }}{{ headless ? ` (${headless})` : '' }}</span>
 </template>

package/components/nav/Pinned.vue

@@ -5,6 +5,10 @@ export default {
     cluster: {
       type:     Object,
       required: true,
+    },
+    tabOrder: {
+      type:    Number,
+      default: null,
     }
   },
 
@@ -28,11 +32,12 @@ export default {
 
 <template>
   <i
-    :tabindex="0"
+    :tabindex="tabOrder"
     :aria-checked="!!pinned"
     class="pin icon"
     :class="{'icon-pin-outlined': !pinned, 'icon-pin': pinned}"
     aria-role="button"
+    :aria-label="`${t('nav.ariaLabel.pinCluster')} ${ cluster.label }`"
     @click.stop.prevent="toggle"
     @keydown.enter.prevent="toggle"
     @keydown.space.prevent="toggle"

package/components/nav/TopLevelMenu.helper.ts

@@ -13,6 +13,7 @@ interface TopLevelMenuCluster {
   ready: boolean
   providerNavLogo: string,
   badge: string,
+  iconColor: string,
   isLocal: boolean,
   pinned: boolean,
   description: string,
@@ -128,6 +129,12 @@ export abstract class BaseTopLevelMenuHelper {
     this.$store = $store;
 
     this.hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
+
+    // Reduce flicker when component is recreated on a different layout
+    const { clustersPinned = [], clustersOthers = [] } = this.$store.getters['sideNavCache'] || {};
+
+    this.clustersPinned.push(...clustersPinned);
+    this.clustersOthers.push(...clustersOthers);
   }
 
   protected convertToCluster(mgmtCluster: MgmtCluster, provCluster: ProvCluster): TopLevelMenuCluster {
@@ -137,6 +144,7 @@ export abstract class BaseTopLevelMenuHelper {
       ready:           mgmtCluster.isReady, // && !provCluster?.hasError,
       providerNavLogo: mgmtCluster.providerMenuLogo,
       badge:           mgmtCluster.badge,
+      iconColor:       mgmtCluster.iconColor,
       isLocal:         mgmtCluster.isLocal,
       pinned:          mgmtCluster.pinned,
       description:     provCluster?.description || mgmtCluster.description,
@@ -145,6 +153,10 @@ export abstract class BaseTopLevelMenuHelper {
       clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: mgmtCluster.id } }
     };
   }
+
+  protected cacheClusters() {
+    this.$store.dispatch('setSideNavCache', { clustersPinned: this.clustersPinned, clustersOthers: this.clustersOthers });
+  }
 }
 
 /**
@@ -258,6 +270,8 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
 
     this.clustersPinned.push(..._clustersPinned);
     this.clustersOthers.push(..._clustersNotPinned);
+
+    this.cacheClusters();
   }
 
   private constructParams({
@@ -378,7 +392,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
 }
 
 /**
- * Helper designed to supply non-pagainted results for the top level menu cluster resources
+ * Helper designed to supply non-paginated results for the top level menu cluster resources
  */
 export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements TopLevelMenuHelper {
   constructor({ $store }: {
@@ -401,6 +415,8 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
 
     this.clustersPinned.push(..._clustersPinned);
     this.clustersOthers.push(..._clustersNotPinned);
+
+    this.cacheClusters();
   }
 
   /**

package/components/nav/TopLevelMenu.vue

@@ -42,6 +42,17 @@ export default {
     const provClusters = !canPagination && hasProvCluster ? this.$store.getters[`management/all`](CAPI.RANCHER_CLUSTER) : [];
     const mgmtClusters = !canPagination ? this.$store.getters[`management/all`](MANAGEMENT.CLUSTER) : [];
 
+    if (!canPagination) {
+      // Reduce the impact of the initial load, but only if we're not making a request
+      const args = {
+        pinnedIds:   this.pinnedIds,
+        searchTerm:  this.search,
+        unPinnedMax: this.maxClustersToShow
+      };
+
+      helper.update(args);
+    }
+
     return {
       shown:             false,
       displayVersion,
@@ -54,8 +65,9 @@ export default {
 
       canPagination,
       helper,
-      debouncedHelperUpdateSlow:  debounce((...args) => this.helper.update(...args), 750),
-      debouncedHelperUpdateQuick: debounce((...args) => this.helper.update(...args), 200),
+      debouncedHelperUpdateSlow:   debounce((...args) => this.helper.update(...args), 1000),
+      debouncedHelperUpdateMedium: debounce((...args) => this.helper.update(...args), 750),
+      debouncedHelperUpdateQuick:  debounce((...args) => this.helper.update(...args), 200),
       provClusters,
       mgmtClusters,
     };
@@ -264,6 +276,14 @@ export default {
       this.shown = false;
     },
 
+    // Before SSP world all of these changes were kicked off given Vue change detection to properties in a computed method.
+    // Changes could come from two scenarios
+    // 1. Changes made by the user (pin / search). Could be tens per second
+    // 2. Changes made by rancher to clusters (state, label, etc change). Could be hundreds a second
+    // They can be restricted to help the churn caused from above
+    // 1. When SSP enabled reduce http spam
+    // 2. When SSP is disabled (legacy) reduce fn churn (this was a known performance customer issue)
+
     pinnedIds: {
       immediate: true,
       handler(neu, old) {
@@ -271,27 +291,29 @@ export default {
           return;
         }
 
+        // Low throughput (user click). Changes should be shown quickly
         this.updateClusters(neu, 'quick');
       }
     },
 
     search() {
-      this.updateClusters(this.pinnedIds, 'slow');
+      // Medium throughput. Changes should be shown quickly, unless we want to reduce http spam in SSP world
+      this.updateClusters(this.pinnedIds, this.canPagination ? 'medium' : 'quick');
     },
 
     provClusters: {
-      handler() {
-        // Shouldn't get here if SSP
-        this.updateClusters(this.pinnedIds, 'slow');
+      handler(neu, old) {
+        // Potentially incredibly high throughput. Changes should be at least limited (slow if state change, quick if added/removed). Shouldn't get here if SSP
+        this.updateClusters(this.pinnedIds, neu?.length === old?.length ? 'slow' : 'quick');
       },
       deep:      true,
       immediate: true,
     },
 
     mgmtClusters: {
-      handler() {
-        // Shouldn't get here if SSP
-        this.updateClusters(this.pinnedIds, 'slow');
+      handler(neu, old) {
+        // Potentially incredibly high throughput. Changes should be at least limited (slow if state change, quick if added/removed). Shouldn't get here if SSP
+        this.updateClusters(this.pinnedIds, neu?.length === old?.length ? 'slow' : 'quick');
       },
       deep:      true,
       immediate: true,
@@ -424,7 +446,7 @@ export default {
       };
     },
 
-    updateClusters(pinnedIds, speed = 'slow' | 'quick') {
+    updateClusters(pinnedIds, speed = 'slow' | 'medium' | 'quick') {
       const args = {
         pinnedIds,
         searchTerm:  this.search,
@@ -435,6 +457,9 @@ export default {
       case 'slow':
         this.debouncedHelperUpdateSlow(args);
         break;
+      case 'medium':
+        this.debouncedHelperUpdateMedium(args);
+        break;
       case 'quick':
         this.debouncedHelperUpdateQuick(args);
         break;
@@ -460,6 +485,8 @@ export default {
         :class="{'menu-open': shown, 'menu-close':!shown}"
         :style="sideMenuStyle"
         tabindex="-1"
+        role="navigation"
+        :aria-label="t('nav.ariaLabel.topLevelMenu')"
       >
         <!-- Logo and name -->
         <div class="title">
@@ -479,6 +506,7 @@ export default {
               height="24"
               viewBox="0 0 24 24"
               width="24"
+              :alt="t('nav.alt.mainMenuIcon')"
             ><path
               d="M0 0h24v24H0z"
               fill="none"
@@ -487,6 +515,7 @@ export default {
           <div class="side-menu-logo">
             <BrandImage
               data-testid="side-menu__brand-img"
+              :alt="t('nav.alt.mainMenuRancherLogo')"
               file-name="rancher-logo.svg"
             />
           </div>
@@ -500,9 +529,12 @@ export default {
               <router-link
                 class="option cluster selector home"
                 :to="{ name: 'home' }"
+                role="link"
+                :aria-label="t('nav.ariaLabel.homePage')"
               >
                 <svg
                   v-clean-tooltip="getTooltipConfig(t('nav.home'))"
+                  class="top-menu-icon"
                   xmlns="http://www.w3.org/2000/svg"
                   height="24"
                   viewBox="0 0 24 24"
@@ -537,6 +569,8 @@ export default {
                   ref="clusterFilter"
                   v-model="clusterFilter"
                   :placeholder="t('nav.search.placeholder')"
+                  :tabindex="!shown ? -1 : 0"
+                  :aria-label="t('nav.search.ariaLabel')"
                 >
                 <i
                   class="magnifier icon icon-search"
@@ -558,10 +592,11 @@ export default {
               <a
                 v-if="isRancherInHarvester"
                 class="option"
+                tabindex="0"
                 @click="goToHarvesterCluster()"
               >
                 <i
-                  class="icon icon-dashboard"
+                  class="icon icon-dashboard app-icon"
                 />
                 <div>
                   {{ t('nav.harvesterDashboard') }}
@@ -577,8 +612,11 @@ export default {
                 class="option"
                 :to="a.to"
                 :class="{'active-menu-link': a.isMenuActive }"
+                role="link"
+                :aria-label="`${t('nav.ariaLabel.harvesterCluster')} ${ a.label }`"
               >
                 <IconOrSvg
+                  class="app-icon"
                   :icon="a.icon"
                   :src="a.svg"
                 />
@@ -612,6 +650,8 @@ export default {
                     class="cluster selector option"
                     :class="{'active-menu-link': c.isMenuActive }"
                     :to="c.clusterRoute"
+                    role="button"
+                    :aria-label="`${t('nav.ariaLabel.cluster')} ${ c.label }`"
                     @click.prevent="clusterMenuClick($event, c)"
                     @shortkey="handleKeyComboClick"
                   >
@@ -635,6 +675,7 @@ export default {
                     </div>
                     <Pinned
                       :cluster="c"
+                      :tab-order="shown ? 0 : -1"
                     />
                   </button>
                   <span
@@ -661,6 +702,7 @@ export default {
                     </div>
                     <Pinned
                       :cluster="c"
+                      :tab-order="shown ? 0 : -1"
                     />
                   </span>
                 </div>
@@ -687,6 +729,8 @@ export default {
                     class="cluster selector option"
                     :class="{'active-menu-link': c.isMenuActive }"
                     :to="c.clusterRoute"
+                    role="button"
+                    :aria-label="`${t('nav.ariaLabel.cluster')} ${ c.label }`"
                     @click="clusterMenuClick($event, c)"
                     @shortkey="handleKeyComboClick"
                   >
@@ -700,7 +744,6 @@ export default {
                       v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
-                      <!-- HERE LOCAL CLUSTER! -->
                       <p>{{ c.label }}</p>
                       <p
                         v-if="c.description"
@@ -711,6 +754,7 @@ export default {
                     </div>
                     <Pinned
                       :class="{'showPin': c.pinned}"
+                      :tab-order="shown ? 0 : -1"
                       :cluster="c"
                     />
                   </button>
@@ -738,6 +782,7 @@ export default {
                     </div>
                     <Pinned
                       :class="{'showPin': c.pinned}"
+                      :tab-order="shown ? 0 : -1"
                       :cluster="c"
                     />
                   </span>
@@ -763,6 +808,8 @@ export default {
                 product: 'manager',
                 resource: 'provisioning.cattle.io.cluster'
               } }"
+              role="link"
+              :aria-label="t('nav.ariaLabel.seeAll')"
             >
               <span>
                 {{ shown ? t('nav.seeAllClusters') : t('nav.seeAllClustersCollapsed') }}
@@ -771,6 +818,7 @@ export default {
             </router-link>
           </template>
 
+          <!-- MULTI CLUSTER APPS -->
           <div class="category">
             <template v-if="multiClusterApps.length">
               <div
@@ -790,9 +838,12 @@ export default {
                   class="option"
                   :class="{'active-menu-link': a.isMenuActive }"
                   :to="a.to"
+                  role="link"
+                  :aria-label="`${t('nav.ariaLabel.multiClusterApps')} ${ a.label }`"
                 >
                   <IconOrSvg
                     v-clean-tooltip="getTooltipConfig(a.label)"
+                    class="app-icon"
                     :icon="a.icon"
                     :src="a.svg"
                   />
@@ -801,7 +852,7 @@ export default {
               </div>
             </template>
 
-            <!-- App menu -->
+            <!-- Configuration apps menu -->
             <template v-if="configurationApps.length">
               <div
                 class="category-title"
@@ -820,9 +871,12 @@ export default {
                   class="option"
                   :class="{'active-menu-link': a.isMenuActive }"
                   :to="a.to"
+                  role="link"
+                  :aria-label="`${t('nav.ariaLabel.configurationApps')} ${ a.label }`"
                 >
                   <IconOrSvg
                     v-clean-tooltip="getTooltipConfig(a.label)"
+                    class="app-icon"
                     :icon="a.icon"
                     :src="a.svg"
                   />
@@ -844,6 +898,8 @@ export default {
           >
             <router-link
               :to="{name: 'support'}"
+              role="link"
+              :aria-label="t('nav.ariaLabel.support')"
             >
               {{ t('nav.support', {hasSupport}) }}
             </router-link>
@@ -855,6 +911,8 @@ export default {
           >
             <router-link
               :to="{ name: 'about' }"
+              role="link"
+              :aria-label="t('nav.ariaLabel.about')"
             >
               {{ aboutText }}
             </router-link>
@@ -958,13 +1016,27 @@ export default {
     overflow: hidden;
     transition: width 250ms;
 
-    &:focus {
+    &:focus, &:focus-visible {
+      outline: 0;
+    }
+
+    .option:focus-visible {
       outline: 0;
     }
 
-     &.menu-open {
+    &.menu-open {
       width: 300px;
       box-shadow: 3px 1px 3px var(--shadow);
+
+      // because of accessibility, we force pin action to be visible on menu open
+      .pin {
+        display: block !important;
+
+        &:focus-visible {
+          @include focus-outline;
+          outline-offset: 4px;
+        }
+      }
     }
 
     .title {
@@ -1074,10 +1146,6 @@ export default {
         &:focus {
           outline: 0;
           box-shadow: none;
-
-          > div {
-            text-decoration: underline;
-          }
         }
 
         > i, > img {
@@ -1095,7 +1163,22 @@ export default {
           fill: var(--link);
         }
 
+        .top-menu-icon {
+          outline-offset: 4px;
+        }
+
         &.router-link-active, &.active-menu-link {
+          &:focus-visible {
+            .top-menu-icon, .app-icon {
+              @include focus-outline;
+            }
+          }
+
+          &:focus-visible .rancher-provider-icon {
+            @include focus-outline;
+            outline-offset: -4px;
+          }
+
           background: var(--primary-hover-bg);
           color: var(--primary-hover-text);
 
@@ -1112,6 +1195,12 @@ export default {
           }
         }
 
+        &:focus-visible {
+          .top-menu-icon, .rancher-provider-icon, .app-icon {
+            @include focus-outline;
+          }
+        }
+
         &:hover {
           color: var(--primary-hover-text);
           background: var(--primary-hover-bg);
@@ -1188,10 +1277,19 @@ export default {
         margin-right: 16px;
         margin-top: 10px;
 
+        &:focus-visible {
+          outline: none;
+        }
+
         span {
           display: flex;
           align-items: center;
         }
+
+        &:focus-visible span {
+          @include focus-outline;
+          outline-offset: 4px;
+        }
       }
 
       .clusters {
@@ -1314,6 +1412,33 @@ export default {
       }
     }
 
+    &.menu-open {
+      .option {
+        &.router-link-active, &.active-menu-link {
+          &:focus-visible {
+            @include focus-outline;
+            border-radius: 0;
+            outline-offset: -4px;
+
+            .top-menu-icon, .app-icon, .rancher-provider-icon {
+              outline: none;
+              border-radius: 0;
+            }
+          }
+        }
+
+        &:focus-visible {
+          @include focus-outline;
+          outline-offset: -4px;
+
+          .top-menu-icon, .app-icon, .rancher-provider-icon {
+            outline: none;
+            border-radius: 0;
+          }
+        }
+      }
+    }
+
     &.menu-close {
       .side-menu-logo  {
         opacity: 0;
@@ -1387,8 +1512,18 @@ export default {
         text-align: center;
       }
 
+      .support a:focus-visible {
+        @include focus-outline;
+        outline-offset: 4px;
+      }
+
       .version {
         cursor: pointer;
+
+        a:focus-visible {
+          @include focus-outline;
+          outline-offset: 4px;
+        }
       }
     }
   }

package/config/pagination-table-headers.js

@@ -1,4 +1,6 @@
-import { STATE, NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE } from '@shell/config/table-headers';
+import {
+  STATE, NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, OBJECT
+} from '@shell/config/table-headers';
 
 // This file contains table headers
 // These table headers are used for server side pagination
@@ -44,6 +46,12 @@ export const STEVE_NAMESPACE_COL = {
   search: 'metadata.namespace',
 };
 
+export const STEVE_EVENT_OBJECT = {
+  ...OBJECT,
+  sort:   'involvedObject.kind',
+  search: 'involvedObject.kind',
+};
+
 export const STEVE_LIST_GROUPS = [{
   tooltipKey: 'resourceTable.groupBy.none',
   icon:       'icon-list-flat',