ui: fix navigation for namespaced jobs in search and job version

[lgfa29]

Use the new URL structure for navigating to a job page.

I started in the global search, but did a quick search to find other places with the same problem. I found this gotoJobsForNamespace function that I think it's also wrong, but it doesn't seem to be called from anywhere so maybe we can delete it?

Closes #15893

[lgfa29]

If we extract the logic to generate the proper namespaced job ID into a helper function we could avoid this store query, but I think it's fine this way?

[github-actions]

Ember Asset Size action

As of fb73b61

Files that got Bigger 🚨:

File	raw	gzip
nomad-ui.js	+41 B	-23 B

Files that stayed the same size 🤷‍:

File	raw	gzip
vendor.js	0 B	0 B
nomad-ui.css	0 B	0 B
vendor.css	0 B	0 B

[philrenaud]

Nice find, and this solves the bug well. I think you're safe to remove gotoJobsForNamespace in gutter-menu also.

[github-actions]

Ember Test Audit comparison

	main	fb73b61	change
passes	1452	1452	0
failures	0	0	0
flaky	0	0	0
duration	10m 19s 511ms	10m 24s 444ms	+04s 933ms

[lgfa29]

Ok, I found where gotoJobsForNamespace was being used and it was removed in https://github.com/hashicorp/nomad/pull/10444/files#diff-bce0972dc9d8b2d20b097153494f982afa17c33099a1611d9574e390c6d2ebbdL36, so I feel more confident that we can indeed remove it 😄

[lgfa29]

@philrenaud the Percy failure seems flaky so I'm going to merge this one.

[ChaiWithJai]

nit: I think this API call is unnecessary here and we can't guarantee when the router transition will occur now. It could happen > ~150ms later. When we use then we don't guarantee when the JavaScript scheduler (event loop) will dispatch the callback.

I think we might have been able to get away with:

job.belongsTo('namespace').id()

This would have been synchronous.

[lgfa29]

Ah interesting. Yeah, I thought about the added network request but I thought it would OK in this case since we're redirecting to the job page so we would need to fetch it anyway. If the job is not in the state store is the user impact a delay between the click and the redirect?

I think we might have been able to get away with:

job.belongsTo('namespace').id()

I think this would have the same problem? job is only available after the this.store.findRecord('job', fullId) call. We we could do to avoid this is to have something like:

this.router.transitionTo('jobs.job', `${model.id}@{model.namespace}`);

But that duplicates the logic in idWithNamespace(). We could extract the logic to a shared helper function but that seemed a bit much in this case, but maybe not?

[ChaiWithJai]

A few things to chew on here:

1. Super subtle yet important difference between model.namespace and .belongsTo('model').id(). The prior makes a network request, the latter is synchronous.
2. What happens under the hood when you use .then? Our .then syntax is a misnomer. .then is really a setter function that says add this function to the array on my Promise object (that we can just call onComplete). So we dispatch a network request, continue the thread of execution, when the call stack is cleared, we'll check our callback queue where our job will be and then execute the callback function of router.transitionTo, then navigate to the job page and dispatch the same network request when we're on the jobs.job.index route to get fresh data.

The key thing worth noting here is when router.transitionTo will execute. A decent way of testing this behavior would be opening up your Developer Tools, go to the Network tab, simulate a slow network.

You did a great job on this PR and I'm really looking forward to more contributions from you! I figured you would just like to nerd out on what's actually happening under the hood.

[lgfa29]

Oh yeah, I'm taking this opportunity to learn more 😄

One thing to note is that this component doesn't user Ember Data (or didn't prior to this PR). The variable names model is not actually a model, it's just an object like this: https://github.com/hashicorp/nomad/blob/v1.4.3/ui/app/components/global-search/control.js#L69-L74, so model.namespace is just accessing a string in the object.

The .then part is interesting. There could be a ghost redirect in a slow connection where the user clicks a search result, then clicks somewhere else, and it's then redirected to the search result. Something to keep an eye on. Would making the action async and await the fetch prevent the early return until the promise finishes?

[ChaiWithJai]

Great job! I think we could have avoided the API call, however, that's not a real blocker here.