[SPARK-8694][WebUI]Defer executing drawTaskAssignmentTimeline until page loaded to avoid to freeze the page

[zsxwing]

When there are massive tasks in the stage page (such as, running sc.parallelize(1 to 100000, 10000).count()), Event Timeline needs 15+ seconds to render the graph (drawTaskAssignmentTimeline) in my environment. The page is unresponsive until the graph is ready.

However, since Event Timeline is hidden by default, we can defer drawTaskAssignmentTimeline until page loaded to avoid freezing the page. So that the user can view the page while rendering Event Timeline in the background.

This PR puts drawTaskAssignmentTimeline into $(function(){}) to avoid blocking loading page.

[SparkQA]

Test build #35941 has finished for PR 7071 at commit 5b65226.

• This patch passes all tests.
• This patch merges cleanly.
• This patch adds no public classes.

[sarutak]

Thanks for reporting this issue. I'll try to apply this patch.

[sarutak]

@zsxwing By the way, I created SPARK-8694 as a sub task of SPARK-2015 for this issue.
So, could you modify the title of this PR?

[zsxwing]

Updated it.

[sarutak]

@zsxwing Did you profile after patching? I spent some times to profile before-patching and after-patching 2 times for each, with 10000 tasks. I couldn't recognized significant performance up of rendering.

To make matters worse, the timeline is not available until the entire page has been done to render.

before patching take 1

before patching take2

after patching take1

after patching take2

[sarutak]

For more information, I've tested using Chrome 39.0.2171.71.

[zsxwing]

This PR is not for rendering speedup. It's just for people to be able to view the page before finishing rendering the timeline.

[sarutak]

As you can see the captures, the time I wait until I can view the page was not so different between before patching and after.
And as I mentioned above, I was made to wait to view timeline until entire page is rendered.

Can you have some time to spent to profile?

[zsxwing]

And as I mentioned above, I was made to wait to view timeline until entire page is rendered.

Sorry that it's not clear about the purpose of this PR.

Before this patch, people will see the following incomplete page for several seconds. The browser won't display the content below the timeline because drawTaskAssignmentTimeline blocks the whole page. People need to wait until drawTaskAssignmentTimeline finishes.

After this patch, people can see the complete page at once except the timeline. And the timeline is hidden, so it's not a big deal.

[sarutak]

I have never seen the situation you mentioned even when there are 10000 tasks. The contents below the timeline are rendered immediately with my browser (Chrome, Firefox).

I wonder this issue may depend on environments.

@kayousterhout , @pwendell Have you ever seen this issue?

[zsxwing]

I wonder this issue may depend on environments.

I think it depends on the performance of CPU. My CPU is 2.7G i7. drawTaskAssignmentTimeline is not very fast in my machine...

[andrewor14]

@zsxwing is this outdated now that we have pagination?

[zsxwing]

@zsxwing is this outdated now that we have pagination?

Yes. I think we don't need it. Closing it.