Handle harvester loading in a route guard to better handle the unauthenticated method. #11373

codyrancher · 2024-07-05T21:57:49Z

Summary

This is done by providing a 404l page which is authenticated.

Fixes #11350

Technical notes summary

We will still need the fix from be1e27b for prod.

Areas or cases that should be tested

404 routing.
Harvester routing.

Screenshot/Video

Regular 404:
https://github.com/rancher/dashboard/assets/55104481/5d3d2fc8-0cbd-4d20-99e0-59dda8a0d8e3

Harvester 404:
https://github.com/rancher/dashboard/assets/55104481/310f10e4-6881-402f-8952-a55f9b846d82

I noticed a flicker of the resource page on this one. I can only reproduce this on the harvester cluster but it's in master and unrelated to both this PR and harvester itself. If anyone else can reproduce this I'll resolve it as a separate issue.

Checklist

The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
The PR has a Milestone
The PR template has been filled out
The PR has been self reviewed
The PR has a reviewer assigned
The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes

codyrancher · 2024-07-08T06:18:52Z

shell/config/router/navigation-guards/harvester.js

+}
+
+export async function loadHarvester(to, from, next, { store }) {
+  if (!routeRequiresAuthentication(to) || to.name !== '404') {


Only execute if authenticated and on a 404 page.

codyrancher · 2024-07-08T06:19:27Z

shell/config/router/routes.js

+    path:      '*',
+    name:      '404',
+    component: () => interopDefault(import('@shell/pages/404.vue')),
+    meta:      { requiresAuthentication: true },


We specifically needed this component so we could make sure authentication would be run on 404s.

codyrancher · 2024-07-08T06:19:55Z

shell/pages/404.vue

+import Brand from '@shell/mixins/brand';
+
+export default {
+  mixins: [Brand],


We need this to reduce the flicker in dark mode.

codyrancher · 2024-07-08T06:20:49Z

shell/pages/404.vue

+  beforeMount() {
+    this.$store.commit('setError', { error: new Error('404: This page could not be found') });
+    this.$router.replace('/fail-whale');
+  }


If route guards don't redirect us we should go to failwhale with the error message we used to emit in the render() method of entry-helpers.js

codyrancher · 2024-07-08T06:21:18Z

shell/initialize/entry-helpers.js

-  // If no Components matched, generate 404
-  if (!Components.length) {


This will no longer ever be true because our 404 page will match if nothing else will.

codyrancher · 2024-07-08T06:32:50Z

I'll open for review once tests pass again. Looks like we may have had a node version change. This change was passing all unit and e2e tests on friday.

richard-cox

When testing I saw all nav guards start in order, but finish out of order. This makes me very nervous, but i couldn't find any specific bugs. We should pay attention to this, in particular things like multiple api requests to the same endpoint on load, or extra schema missing warnings. Just as a tidy up I added async/await to the beforeEach hooks (though i don't think vue router awaits them).

I also de-harvester'd the navigation guard names.

Edit: Also re-based to resolve conflict given something merged earlier in the day

richard-cox · 2024-07-08T16:28:30Z

shell/config/router/navigation-guards/runtime-extension-route.js

+  try {
+    // Handle the loading of dynamic plugins (Harvester) because we only want to attempt to load those plugins and routes if we first couldn't find a page.
+    // We should probably get rid of this concept entirely and just load plugins at the start.
+    await store.dispatch('loadManagement');


This makes me nervous, we're calling this before some of the normal setup stuff in the auth middleware. It's quite dependent on the order the nav guards run as well, more in PR review comment

codyrancher · 2024-07-08T17:50:25Z

I think we need to be really clear what the issue is because the way that you've described it and the commit you added makes me think there's a misunderstanding of how navigation guards work.

Just as a tidy up I added async/await to the beforeEach hooks (though i don't think vue router awaits them).

You're right, vue-router isn't awaiting them. It's waiting for the the hook passed to beforeEach to call next(). This change doesn't actually safeguard against anything.

When testing I saw all nav guards start in order, but finish out of order.

The call to next() is what will call the next navigation guard in the list. You will not see the caller finish until the callee finishes because it's going in stack order.

function b() {
   console.log('b');
}

function a() {
   console.log('a')
   b()
   console.log('c')
}

a();

We will see abc printed which indicates a() finished executing after b() finished. This is the exact behavior we should see with the beforeEach navigation guards. If you're seeing out of stack order then we do have a problem and we should address that. But that's not what I noticed while working on this.

codyrancher · 2024-07-09T04:03:25Z

I'll go ahead and merge once master has all tests pass or we decide to skip.

…enticated method. This is done by providing a 404 catch all page which is authenticated.

…ard to be generic

rancher-ui-project-bot bot assigned codyrancher Jul 5, 2024

codyrancher force-pushed the harvester-guard branch 2 times, most recently from b86c891 to 93cd9e5 Compare July 8, 2024 06:12

codyrancher changed the title ~~Handle harvester loading in a route guard to better handle the unauth…~~ Handle harvester loading in a route guard to better handle the unauthenticated method. This is done by providing a 404 catch all page which is authenticated. Jul 8, 2024

codyrancher changed the title ~~Handle harvester loading in a route guard to better handle the unauthenticated method. This is done by providing a 404 catch all page which is authenticated.~~ Handle harvester loading in a route guard to better handle the unauthenticated method. Jul 8, 2024

codyrancher added this to the v2.9.0 milestone Jul 8, 2024

codyrancher commented Jul 8, 2024

View reviewed changes

codyrancher mentioned this pull request Jul 8, 2024

Fixing harvester cluster page reload routing #11359

Merged

7 tasks

codyrancher requested a review from richard-cox July 8, 2024 06:31

richard-cox force-pushed the harvester-guard branch from 93cd9e5 to e54b0b8 Compare July 8, 2024 16:25

richard-cox approved these changes Jul 8, 2024

View reviewed changes

codyrancher force-pushed the harvester-guard branch from e54b0b8 to 89286c3 Compare July 8, 2024 21:37

codyrancher marked this pull request as ready for review July 9, 2024 04:02

richard-cox force-pushed the harvester-guard branch from 89286c3 to a288116 Compare July 9, 2024 09:04

Richard added 2 commits July 9, 2024 07:56

Handle harvester loading in a route guard to better handle the unauth…

d88c454

…enticated method. This is done by providing a 404 catch all page which is authenticated.

Add async handlers to nav-guard installers, change harvester route gu…

1664f88

…ard to be generic

codyrancher force-pushed the harvester-guard branch from a288116 to 1664f88 Compare July 9, 2024 14:57

codyrancher merged commit 0e9709b into rancher:master Jul 9, 2024
26 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Handle harvester loading in a route guard to better handle the unauthenticated method. #11373

Handle harvester loading in a route guard to better handle the unauthenticated method. #11373

codyrancher commented Jul 5, 2024 •

edited

Loading

codyrancher Jul 8, 2024

codyrancher Jul 8, 2024

codyrancher Jul 8, 2024

codyrancher Jul 8, 2024

codyrancher Jul 8, 2024

codyrancher commented Jul 8, 2024

richard-cox left a comment •

edited

Loading

richard-cox Jul 8, 2024

codyrancher commented Jul 8, 2024

codyrancher commented Jul 9, 2024

		// If no Components matched, generate 404
		if (!Components.length) {

Handle harvester loading in a route guard to better handle the unauthenticated method. #11373

Handle harvester loading in a route guard to better handle the unauthenticated method. #11373

Conversation

codyrancher commented Jul 5, 2024 • edited Loading

Summary

Technical notes summary

Areas or cases that should be tested

Screenshot/Video

Checklist

codyrancher Jul 8, 2024

Choose a reason for hiding this comment

codyrancher Jul 8, 2024

Choose a reason for hiding this comment

codyrancher Jul 8, 2024

Choose a reason for hiding this comment

codyrancher Jul 8, 2024

Choose a reason for hiding this comment

codyrancher Jul 8, 2024

Choose a reason for hiding this comment

codyrancher commented Jul 8, 2024

richard-cox left a comment • edited Loading

Choose a reason for hiding this comment

richard-cox Jul 8, 2024

Choose a reason for hiding this comment

codyrancher commented Jul 8, 2024

codyrancher commented Jul 9, 2024

codyrancher commented Jul 5, 2024 •

edited

Loading

richard-cox left a comment •

edited

Loading