Nomad: [bug] Nomad UI breaks when a job name includes a period

Created on 12 Nov 2018  路  5Comments  路  Source: hashicorp/nomad

Nomad version

Nomad v0.8.6

Operating system and Environment details

Ubuntu 16.04

Issue

The UI breaks whenever a job name has a period

Reproduction steps

Run a job with periods in the name e.g. 'my.new.job' , browse the jobs view and click on a job with a period. Get a page with "Error Something went wrong"

themui typbug

Most helpful comment

Thank you for the screenshots @nickwales. @angrycub managed to reproduce this and together we diagnosed the issue.

Turns out it isn't the dot in the job name, but a dot in the task name. This is a perfectly valid Nomad thing to do, but it breaks this line of code.

const state = get(hash, `TaskStates.${key}`);

key here is the task name, so it expands to something like

const state = get(hash, `TaskStates.my.task`);

Which uses Ember's getter function to avoid having to check for undefined objects. Unfortunately, this expands to vanilla js that looks something like

const state = hash.TaskStates.my.task;

Which doesn't work since the actual object looks something like

{
  "TaskStates": {
    "my.task": { ... }
  }
}

The correct js is more like

const state = hash.TaskStates ? hash.TaskStates['my.task'] : {}

Now that the root issue is known, I can fix it. I'll also make sure to check any other place where this might be a problem.

All 5 comments

Hi @nickwales, I just tried replicating this locally with v0.8.6 and couldn't.

image

Can you reproduce this while the chrome/firefox/safari dev tools are open monitoring network traffic? I'm wondering if the API request is erroring and causing the UI to error. Or maybe the dots are a red herring and the issue is something else?

I'm looking for a screenshot like this:

image

Thank you!

@DingoEatingFuzz interesting that you're not seeing it, could be a red herring but I can't yet see any differences between jobs with and without the dots! The network diagram or syslog doesn't show me anything but the console has an unrecoverable error:

Console:
screen shot 2018-12-03 at 8 04 24 am

Network:
screen shot 2018-12-03 at 8 10 52 am

Thank you for the screenshots @nickwales. @angrycub managed to reproduce this and together we diagnosed the issue.

Turns out it isn't the dot in the job name, but a dot in the task name. This is a perfectly valid Nomad thing to do, but it breaks this line of code.

const state = get(hash, `TaskStates.${key}`);

key here is the task name, so it expands to something like

const state = get(hash, `TaskStates.my.task`);

Which uses Ember's getter function to avoid having to check for undefined objects. Unfortunately, this expands to vanilla js that looks something like

const state = hash.TaskStates.my.task;

Which doesn't work since the actual object looks something like

{
  "TaskStates": {
    "my.task": { ... }
  }
}

The correct js is more like

const state = hash.TaskStates ? hash.TaskStates['my.task'] : {}

Now that the root issue is known, I can fix it. I'll also make sure to check any other place where this might be a problem.

Awesome, thank you!

Fixed in #4994

Was this page helpful?
0 / 5 - 0 ratings