Fixes #26349 - Create tasks details page in react

[MariaAga]

The reload Button now only re-fetches the task data instead the whole html
The time calculation has slightly changed and now follows http://cldr.unicode.org/ format

wip for:

• missing tests
• ruby 'leftovers'

[adamruzicka]

Left some comments inline, rubocop is not too happy about these changes.

[MariaAga]

Fixed the rubocop issues

[adamruzicka]

Did a little bit of testing, encountered a couple of issues. For a task which started at Thu, 13 Jun 2019 09:30:29 UTC +00:00 and ended at Thu, 13 Jun 2019 09:30:42 UTC +00:00:

• In Raw tab, I'm getting Duration: NaN seconds
• In Task tab, all the time fields say Invalid Date
• When accessing the page, I get this in the console https://gist.github.com/adamruzicka/f5630b0fd1802a655eae83ca6bcf98f0

This changes how the details page looks a tiny bit, it is especially noticeable on non-standard display sizes, see https://imgur.com/a/KCLtclk

[MariaAga]

@adamruzicka I couldn't reproduce the date issues, can you attach the API data from the task:
/foreman_tasks/api/tasks/TASK_ID/details
?

[adamruzicka]

Here you are https://gist.github.com/adamruzicka/c11e6f9e3d3deec6bfb2d970c944b566

[MariaAga]

@adamruzicka I loaded all of your data and still didn't encounter this issue, can you maybe re-check?

[adamruzicka]

It seems it works in chrome (left, google-chrome-stable-75.0.3770.90-1), but doesn't work in firefox (right, firefox-67.0-4)

[MariaAga]

Apparently Firefox can't format dd-mm-yyyy date like chrome, and that's the format that Ruby sends. Fixed this and the styling issues, thanks for the help @adamruzicka !
I still didn't receive the console error (not in Firefox or in Chrome)

[adamruzicka]

When the window is narrow, every other row is right aligned.

When the window is wide, the content doesn't cover the entire available space. I'm not saying that's bad, just that it is different from the previous behavior.

https://imgur.com/a/LWQbHRy

[MariaAga]

Thanks for bringing this to my attention! It looks wrong to me so I changed it and I think it looks better now

[adamruzicka]

When you're looking at a stopped task and turn on auto reload, it keeps refreshing. Before this PR it would refresh once, figure out the task is already stopped and won't change in the future so it stopped reloading.

[adamruzicka]

I encountered an odd issue.

0. (prerequisite) Have 2 tasks, one which is running and one which is stopped
1. Go to tasks index
2. Select running task
3. Click back in the browser
4. Select the stopped task

Actual result: The task renders for a moment, but that is suddenly replaced by data from the running task.
Expected result: The task renders and stays.

I can reproduce it somewhat reliably so if you need any data feel free to reach out to me.

[adamruzicka]

Two more things. Also needs a rebase

[jeremylenz]

Apparently Firefox can't format dd-mm-yyyy date like chrome, and that's the format that Ruby sends. Fixed this and the styling issues, thanks for the help @adamruzicka !
I still didn't receive the console error (not in Firefox or in Chrome)

Hi @MariaAga

I'm on Chrome (75.0 on Fedora 30) and I'm also getting the "Invalid date" issue.

I think the problem is in webpack/ForemanTasks/Components/TaskDetails/Components/TaskHelper.js

In the formatDate function when you do

return new Date(date.replace(/-/g, '/'));

It's replacing the timezone offset with a /, which makes it an invalid date. Like this:

[MariaAga]

@jeremylenz thanks for noticing! I changed the replace function to only replace twice now (and not all the occurrences)

[MariaAga]

@adamruzicka fixed the odd issue. The problem was that the interval for re fetching the data was set twice but stopped once

[adamruzicka]

Rubocop is not happy. Also can you tell if the failures on travis are related to changes introduced by this PR?

[MariaAga]

failures on travis are unrelated to this PR, and fixed rubocops issues

[adamruzicka]

Looks good to me and works as expected, ACK

[adamruzicka]

@MariaAga thank you and sorry for the delays.

@sharvit, @jeremylenz thank you for testing this