Support HA & slow proliferation of cached value - Scenario 2 + 3

shell/components/SortableTable/sorting.js

@@ -79,7 +79,7 @@ export default {
 
       if ( markedColumn ) {
         this._defaultSortBy = markedColumn.name;
-        descending = markedColumn.defaultSortDescending;
+        descending = markedColumn.defaultSortDescending || false;
       } else if ( nameColumn ) {
         // Use the name column if there is one
         this._defaultSortBy = nameColumn.name;

shell/components/nav/TopLevelMenu.helper.ts

@@ -28,7 +28,9 @@ interface UpdateArgs {
   searchTerm: string,
   pinnedIds: string[],
   unPinnedMax?: number,
-  forceWatch?: boolean
+  forceWatch?: boolean,
+  mgmtClusterRevision?: string,
+  provClusterRevision?: string,
 }
 
 type MgmtCluster = {
@@ -179,7 +181,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     // No need to monitor for changes, the UNPINNED request will handle it
     this.clustersPinnedWrapper = new PaginationWrapper({
       $store,
-      id:         'tlm-pinned-clusters',
+      id:         'top-level-menu-pinned-clusters',
       enabledFor: {
         store:    STORE.MANAGEMENT,
         resource: {
@@ -192,13 +194,19 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     // Fetch all UNPINNED clusters capped at 10 (see `clustersOthers` description for details)
     this.clustersOthersWrapper = new PaginationWrapper({
       $store,
-      id:       'tlm-unpinned-clusters',
-      onChange: async({ forceWatch }) => {
-        if (this.args) {
+      id:       'top-level-menu-unpinned-clusters',
+      onChange: async({ forceWatch, revision }) => {
+        if (!this.args) {
+          return;
+        }
+        try {
           await this.update({
             ...this.args,
-            forceWatch
+            forceWatch,
+            mgmtClusterRevision: revision,
           });
+        } catch {
+          // Failures should be logged lower down, not much we can do here except catch to prevent whole ui page warnings in dev mode
         }
       },
       enabledFor: {
@@ -213,13 +221,19 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     // Fetch all prov clusters for the mgmt clusters we have
     this.provClusterWrapper = new PaginationWrapper({
       $store,
-      id:       'tlm-prov-clusters',
-      onChange: async({ forceWatch }) => {
-        if (this.args) {
+      id:       'top-level-menu-prov-clusters',
+      onChange: async({ forceWatch, revision }) => {
+        if (!this.args) {
+          return;
+        }
+        try {
           await this.update({
             ...this.args,
-            forceWatch
+            forceWatch,
+            provClusterRevision: revision,
           });
+        } catch {
+          // Failures should be logged lower down, not much we can do here except catch to prevent whole ui page warnings in dev mode
         }
       },
       enabledFor: {
@@ -251,7 +265,8 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
       pinned: MgmtCluster[],
       notPinned: MgmtCluster[]
     } = await allHash(promises) as any;
-    const provClusters = await this.updateProvCluster(res.notPinned, res.pinned, args.forceWatch || false);
+
+    const provClusters = await this.updateProvCluster(res.notPinned, res.pinned, args);
     const provClustersByMgmtId = provClusters.reduce((res: { [mgmtId: string]: ProvCluster}, provCluster: ProvCluster) => {
       if (provCluster.mgmtClusterId) {
         res[provCluster.mgmtClusterId] = provCluster;
@@ -357,7 +372,9 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 DEFAULT_SORT,
         projectsOrNamespaces: []
       },
-    }).then((r) => r.data);
+      revision: args.mgmtClusterRevision
+    })
+      .then((r) => r.data);
   }
 
   /**
@@ -378,15 +395,17 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 DEFAULT_SORT,
         projectsOrNamespaces: []
       },
-    }).then((r) => r.data);
+      revision: args.mgmtClusterRevision
+    })
+      .then((r) => r.data);
   }
 
   /**
    * Find all provisioning clusters associated with the displayed mgmt clusters
    */
-  private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[], forceWatch: boolean): Promise<ProvCluster[]> {
+  private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[], args: UpdateArgs): Promise<ProvCluster[]> {
     return this.provClusterWrapper.request({
-      forceWatch,
+      forceWatch: args.forceWatch,
       pagination: {
         filters: [
           PaginationParamFilter.createMultipleFields(
@@ -400,7 +419,9 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 [],
         projectsOrNamespaces: []
       },
-    }).then((r) => r.data);
+      revision: args.provClusterRevision
+    })
+      .then((r) => r.data);
   }
 }
 
@@ -585,6 +606,8 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
  */
 class TopLevelMenuHelperService {
   private _helper?: TopLevelMenuHelper;
+  public initialized = false;
+
   public init($store: VuexStore) {
     if (this._helper) {
       return;
@@ -599,6 +622,8 @@ class TopLevelMenuHelperService {
     });
 
     this._helper = canPagination ? new TopLevelMenuHelperPagination({ $store }) : new TopLevelMenuHelperLegacy({ $store });
+
+    this.initialized = true;
   }
 
   public async reset() {

shell/components/nav/TopLevelMenu.vue

@@ -27,6 +27,9 @@ export default {
   },
 
   data() {
+    const sideNavServiceInitialized = sideNavService.initialized;
+    const maxClustersToShow = MENU_MAX_CLUSTERS;
+
     sideNavService.init(this.$store);
 
     const { displayVersion, fullVersion } = getVersionInfo(this.$store);
@@ -43,26 +46,27 @@ 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
+    if (!canPagination || !sideNavServiceInitialized) {
+      // Reduce the impact of the initial load, or properly initialised
+      // Doing this here means we don't need an 'immediate' on the watches below
       const args = {
-        pinnedIds:   this.pinnedIds,
-        searchTerm:  this.search,
-        unPinnedMax: this.maxClustersToShow
+        pinnedIds:   this.$store.getters['prefs/get'](PINNED_CLUSTERS),
+        searchTerm:  '',
+        unPinnedMax: maxClustersToShow
       };
 
       helper.update(args);
     }
 
     return {
-      shown:             false,
+      shown:         false,
       displayVersion,
       fullVersion,
-      clusterFilter:     '',
+      clusterFilter: '',
       hasProvCluster,
-      maxClustersToShow: MENU_MAX_CLUSTERS,
-      emptyCluster:      BLANK_CLUSTER,
-      routeCombo:        false,
+      maxClustersToShow,
+      emptyCluster:  BLANK_CLUSTER,
+      routeCombo:    false,
 
       canPagination,
       helper,
@@ -284,7 +288,6 @@ export default {
     // 2. When SSP is disabled (legacy) reduce fn churn (this was a known performance customer issue)
 
     pinnedIds: {
-      immediate: true,
       handler(neu, old) {
         if (sameContents(neu, old)) {
           return;
@@ -302,20 +305,28 @@ export default {
 
     provClusters: {
       handler(neu, old) {
+        if (this.canPagination) {
+          // Shouldn't be doing this at all if pagination is on (updates handled by  TopLevelMenu pagination wrapper)
+          return;
+        }
+
         // 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,
+      deep: true,
     },
 
     mgmtClusters: {
       handler(neu, old) {
+        if (this.canPagination) {
+          // Shouldn't be doing this at all if pagination is on (updates handled by  TopLevelMenu pagination wrapper)
+          return;
+        }
+
         // 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,
+      deep: true,
     },
 
     hideLocalCluster() {
@@ -454,16 +465,25 @@ export default {
         unPinnedMax: this.maxClustersToShow
       };
 
-      switch (speed) {
-      case 'slow':
-        this.debouncedHelperUpdateSlow(args);
-        break;
-      case 'medium':
-        this.debouncedHelperUpdateMedium(args);
-        break;
-      case 'quick':
-        this.debouncedHelperUpdateQuick(args);
-        break;
+      try {
+        switch (speed) {
+        case 'slow':
+          this.debouncedHelperUpdateSlow(args);
+          break;
+        case 'medium':
+          this.debouncedHelperUpdateMedium(args);
+          break;
+        case 'quick':
+          this.debouncedHelperUpdateQuick(args);
+          break;
+        }
+      } catch (err) {
+        if (this.canPagination) {
+          // Double bubble up errors here, errors are tracked further down
+          // Note that this won't pick up async errors, further tweaks are required for that
+        } else {
+          throw err;
+        }
       }
     }
   }