-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ui: fix navigation for namespaced jobs in search and job version #15906
Merged
Merged
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
```release-note:bug | ||
ui: Fix navigation to pages for jobs that are not in the default namespace | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,6 +13,7 @@ const MAXIMUM_RESULTS = 10; | |
export default class GlobalSearchControl extends Component { | ||
@service router; | ||
@service token; | ||
@service store; | ||
|
||
searchString = null; | ||
|
||
|
@@ -180,14 +181,20 @@ export default class GlobalSearchControl extends Component { | |
@action | ||
selectOption(model) { | ||
if (model.type === 'job') { | ||
this.router.transitionTo('jobs.job', model.id, { | ||
queryParams: { namespace: model.namespace }, | ||
const fullId = JSON.stringify([model.id, model.namespace]); | ||
this.store.findRecord('job', fullId).then((job) => { | ||
this.router.transitionTo('jobs.job', job.idWithNamespace); | ||
}); | ||
Comment on lines
+184
to
187
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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? |
||
} else if (model.type === 'node') { | ||
this.router.transitionTo('clients.client', model.id); | ||
} else if (model.type === 'task-group') { | ||
this.router.transitionTo('jobs.job.task-group', model.jobId, model.id, { | ||
queryParams: { namespace: model.namespace }, | ||
const fullJobId = JSON.stringify([model.jobId, model.namespace]); | ||
this.store.findRecord('job', fullJobId).then((job) => { | ||
this.router.transitionTo( | ||
'jobs.job.task-group', | ||
job.idWithNamespace, | ||
model.id | ||
); | ||
}); | ||
} else if (model.type === 'plugin') { | ||
this.router.transitionTo('csi.plugins.plugin', model.id); | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit
: I think this API call is unnecessary here and we can't guarantee when therouter
transition will occur now. It could happen> ~150ms
later. When we usethen
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:
This would have been synchronous.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 this would have the same problem?
job
is only available after thethis.store.findRecord('job', fullId)
call. We we could do to avoid this is to have something like: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?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A few things to chew on here:
model.namespace
and.belongsTo('model').id()
. The prior makes a network request, the latter is synchronous..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 callonComplete
). So we dispatch a network request, continue the thread of execution, when the call stack is cleared, we'll check our callback queue where ourjob
will be and then execute the callback function ofrouter.transitionTo
, then navigate to thejob
page and dispatch the same network request when we're on thejobs.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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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, somodel.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 actionasync
andawait
the fetch prevent the early return until the promise finishes?