Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 3 commits into from
Jan 26, 2023
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
949c02e
ui: fix navigation for namespaced jobs in search and job version
lgfa29 Jan 26, 2023
d78a4bf
changelog: add entry for #15906
lgfa29 Jan 26, 2023
fb73b61
ui: remove unused function `gotoJobsForNamespace`
lgfa29 Jan 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions .changelog/15906.txt
View file
Open in desktop
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
```
15 changes: 11 additions & 4 deletions ui/app/components/global-search/control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const MAXIMUM_RESULTS = 10;
export default class GlobalSearchControl extends Component {
@service router;
@service token;
@service store;

searchString = null;

Expand Down Expand Up @@ -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) => {
Copy link
Contributor

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 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.

Copy link
Contributor Author

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 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?

Copy link
Contributor

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:

  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.

Copy link
Contributor Author

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, 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?

this.router.transitionTo('jobs.job', job.idWithNamespace);
});
Comment on lines +184 to 187
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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);
Expand Down
5 changes: 1 addition & 4 deletions ui/app/components/job-version.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,7 @@ export default class JobVersion extends Component {
});
} else {
const job = this.get('version.job');

this.router.transitionTo('jobs.job', job.get('plainId'), {
queryParams: { namespace: job.get('namespace.name') },
});
this.router.transitionTo('jobs.job.index', job.get('idWithNamespace'));
}
} catch (e) {
this.handleError({
Expand Down
2 changes: 1 addition & 1 deletion ui/tests/acceptance/job-versions-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ module('Acceptance | job versions', function (hooks) {
JobVersion: versionNumberRevertingTo,
});

assert.equal(currentURL(), `/jobs/${job.id}?namespace=${namespace.id}`);
assert.equal(currentURL(), `/jobs/${job.id}@${namespace.id}`);
}
});

Expand Down
32 changes: 28 additions & 4 deletions ui/tests/acceptance/search-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ module('Acceptance | search', function (hooks) {
server.create('node', { name: 'xyz' });
const otherNode = server.create('node', { name: 'ghi' });

server.create('namespace');
server.create('namespace', { id: 'dev' });

server.create('job', {
id: 'vwxyz',
namespaceId: 'default',
Expand All @@ -30,6 +33,13 @@ module('Acceptance | search', function (hooks) {
groupsCount: 1,
groupTaskCount: 1,
});
server.create('job', {
id: 'xyzw',
name: 'xyzw job',
namespaceId: 'dev',
groupsCount: 1,
groupTaskCount: 1,
});
server.create('job', {
id: 'abc',
namespaceId: 'default',
Expand All @@ -39,6 +49,7 @@ module('Acceptance | search', function (hooks) {

const firstAllocation = server.schema.allocations.all().models[0];
const firstTaskGroup = server.schema.taskGroups.all().models[0];
const namespacedTaskGroup = server.schema.taskGroups.all().models[2];

server.create('csi-plugin', { id: 'xyz-plugin', createVolumes: false });

Expand All @@ -50,10 +61,11 @@ module('Acceptance | search', function (hooks) {
assert.equal(search.groups.length, 5);

search.groups[0].as((jobs) => {
assert.equal(jobs.name, 'Jobs (2)');
assert.equal(jobs.options.length, 2);
assert.equal(jobs.name, 'Jobs (3)');
assert.equal(jobs.options.length, 3);
assert.equal(jobs.options[0].text, 'default > vwxyz');
assert.equal(jobs.options[1].text, 'default > xyz job');
assert.equal(jobs.options[2].text, 'dev > xyzw job');
});

search.groups[1].as((clients) => {
Expand All @@ -80,7 +92,11 @@ module('Acceptance | search', function (hooks) {
});

await Layout.navbar.search.groups[0].options[1].click();
assert.equal(currentURL(), '/jobs/xyz');
assert.equal(currentURL(), '/jobs/xyz@default');

await selectSearch(Layout.navbar.search.scope, 'xy');
await Layout.navbar.search.groups[0].options[2].click();
assert.equal(currentURL(), '/jobs/xyzw@dev');

await selectSearch(Layout.navbar.search.scope, otherNode.name);
await Layout.navbar.search.groups[1].options[0].click();
Expand All @@ -100,7 +116,15 @@ module('Acceptance | search', function (hooks) {
`default > vwxyz > ${firstTaskGroup.name}`
);
await Layout.navbar.search.groups[3].options[0].click();
assert.equal(currentURL(), `/jobs/vwxyz/${firstTaskGroup.name}`);
assert.equal(currentURL(), `/jobs/vwxyz@default/${firstTaskGroup.name}`);

await selectSearch(Layout.navbar.search.scope, namespacedTaskGroup.name);
assert.equal(
Layout.navbar.search.groups[3].options[0].text,
`dev > xyzw > ${namespacedTaskGroup.name}`
);
await Layout.navbar.search.groups[3].options[0].click();
assert.equal(currentURL(), `/jobs/xyzw@dev/${namespacedTaskGroup.name}`);

await selectSearch(Layout.navbar.search.scope, 'xy');
await Layout.navbar.search.groups[4].options[0].click();
Expand Down