[SPARK-8399][Streaming][Web UI] Overlap between histograms and axis' name in Spark Streaming UI

[BenFradet]

Moved where the X axis' name (#batches) is written in histograms in the spark streaming web ui so the histograms and the axis' name do not overlap.

[BenFradet]

@zsxwing Can you have a look, please?

[andrewor14]

add to whitelist

[andrewor14]

Hi @BenFradet, could you post a screenshot of what this looks like before and after your change?

[BenFradet]

Hi @andrewor14,

As I said on the JIRA, I'm not able to post screenshots at this time, sorry, but I might have the time this weekend.

[SparkQA]

Test build #35052 has finished for PR 6845 at commit edd0936.

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

[BenFradet]

As promised, here are the screenshots:

Before:

After:

[tdas]

Can you provide the screenshot of the full UI so that we get sense of the overall aesthetics?

I think #batches should be aligned with the numbers on the axes, but I am not sure until I see the full screenshot

Also @zsxwing what do you think?

[andrewor14]

Looks great. In any case it shouldn't overlap with the bars.

[BenFradet]

@tdas I'll see what I can do.

[BenFradet]

@tdas

Do you think we should align units: #batches and events/sec?

Here is the before:

And, here is the after:

[zsxwing]

Looks a lot of space on the right. Could you just move #batches on the top of the blue bar?

[BenFradet]

Do you mean above the axis?

[zsxwing]

Do you mean above the axis?

No. Still overlap. But #batches is on the top.

[BenFradet]

Mmh, in this case I think we won't be able to see #batches written since the contrast won't be high enough between gray and dark blue.

[BenFradet]

Maybe we should put the axis on the bottom and #batches under the axis.

[tdas]

I dont mind the extra white space at the right. Rather what is bugging me is the batch is not really aligned with x axis / horizontal axis. I mean, if we have to make the batches sit outsides the max-x, then might as well as align it with the numbers (10, 20, 30) on the horizontal axis.

[BenFradet]

Agreed, I'll try to update the PR tomorrow.

[BenFradet]

I have this version which aligns with the units of the lineplot events/sec:

Or do you want to align #batches with the ticks (10, 20, 30, ...)?

[SparkQA]

Test build #35390 has finished for PR 6845 at commit 0564b62.

• This patch fails Spark unit tests.
• This patch merges cleanly.
• This patch adds no public classes.

[tdas]

Yeah, I wanted it aligned with 10, 20, 30 ... all the letters on same line.

[BenFradet]

I adjusted #batches so it's aligned with the ticks as well as the units on the timeline graph (events/sec and sec). I'll post a screenshot later.

[SparkQA]

Test build #35464 has finished for PR 6845 at commit dd46f98.

• This patch fails Spark unit tests.
• This patch merges cleanly.
• This patch adds no public classes.

[BenFradet]

Here's the final screenshot

[tdas]

Test this again.

[BenFradet]

Jenkins, retest this please.

[zsxwing]

I just tried this PR. There is still one problem. The graphs in the inner table does not align with the outer ones.

Could you change 300px to 350px in this line

spark/streaming/src/main/scala/org/apache/spark/streaming/ui/StreamingPage.scala

Line 313 in 6ceb169

<th style="width: 300px;">Histograms</th></tr>

and change 292px to 342px in this line

spark/streaming/src/main/scala/org/apache/spark/streaming/ui/StreamingPage.scala

Line 459 in 6ceb169

<td><div style="width: 292px;">{receiverLastError}</div></td>

This would fix the alignment issue.

[SparkQA]

Test build #35540 has finished for PR 6845 at commit eb610ee.

• This patch fails Spark unit tests.
• This patch merges cleanly.
• This patch adds no public classes.

[BenFradet]

@zsxwing Thanks for spotting this, I will update the PR later today.

[BenFradet]

Here's the latest screenshot:

[SparkQA]

Test build #35562 timed out for PR 6845 at commit b63695f after a configured wait of 175m.

[tdas]

test this please.

[SparkQA]

Test build #35582 has finished for PR 6845 at commit b63695f.

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

[zsxwing]

LGTM

[tdas]

Merged in master and branch-1.4. Thanks!