[SPARK-29323][WEBUI] Add tooltip for The Executors Tab's column names in the Spark history server Page by liucht-inspur · Pull Request #25994 · apache/spark

liucht-inspur · 2019-10-02T04:20:37Z

What changes were proposed in this pull request?

This PR is Adding tooltip for The Executors Tab's column names include RDD Blocks, Disk Used,Cores, Activity Tasks, Failed Tasks , Complete Tasks, Total Tasks in the history server Page.
https://issues.apache.org/jira/browse/SPARK-29323

I have modify the following code in executorspage-template.html
Before:

RDD Blocks Disk Used Cores Active Tasks Failed Tasks Complete Tasks Total Tasks

After:

RDD Blocks Disk Used Cores Active Tasks Failed Tasks Complete Tasks Total Tasks

Why are the changes needed?

the spark Executors of history Tab page, the Summary part shows the line in the list of title, but format is irregular.
Some column names have tooltip, such as Storage Memory, Task Time(GC Time), Input, Shuffle Read,
Shuffle Write and Blacklisted, but there are still some list names that have not tooltip. They are RDD Blocks, Disk Used,Cores, Activity Tasks, Failed Tasks , Complete Tasks and Total Tasks. oddly, Executors section below,All the column names Contains the column names above have tooltip .
It's important for open source projects to have consistent style and user-friendly UI, and I'm working on keeping it consistent And more user-friendly.

Does this PR introduce any user-facing change?

No.

How was this patch tested?

Manual tests for Chrome, Firefox and Safari

Authored-by: liucht-inspur liucht@inspur.com
Signed-off-by: liucht-inspur liucht@inspur.com

RDD Blocks, Disk Used,Cores, Activity Tasks, Failed Tasks , Complete Tasks, Total Tasks in the history server Page. Before: <th>RDD Blocks</th> <th>Disk Used</th> <th>Cores</th> <th>Active Tasks</th> <th>Failed Tasks</th> <th>Complete Tasks</th> <th>Total Tasks</th> After: <th>RDD Blocks</th> <th>Disk Used</th> <th>Cores</th> <th>Active Tasks</th> <th>Failed Tasks</th> <th>Complete Tasks</th> <th>Total Tasks</th> ### Why are the changes needed? the spark Executors of history Tab page, the Summary part shows the line in the list of title, but format is irregular. Some column names have tooltip, such as Storage Memory, Task Time(GC Time), Input, Shuffle Read, Shuffle Write and Blacklisted, but there are still some list names that have not tooltip. They are RDD Blocks, Disk Used,Cores, Activity Tasks, Failed Tasks , Complete Tasks and Total Tasks. oddly, Executors section below,All the column names Contains the column names above have tooltip . It's important for open source projects to have consistent style and user-friendly UI, and I'm working on keeping it consistent And more user-friendly. ### Does this PR introduce any user-facing change? No. ### How was this patch tested? Manual tests for Chrome, Firefox and Safari Authored-by: liucht-inspur <liucht@inspur.com> Signed-off-by: liucht-inspur <liucht@inspur.com>

liucht-inspur

Please help to review this change,thanks.

srowen · 2019-10-03T13:52:15Z

Where does the tooltip text come from? I'm missing that part.

liucht-inspur · 2019-10-03T14:25:56Z

@srowen They come from the same column names in the Executors like that under the red line:

liucht-inspur · 2019-10-03T14:47:28Z

Summary code as

PK Executors code as

liucht-inspur · 2019-10-03T15:56:37Z

Where does the tooltip text come from? I'm missing that part.

The same text Like the Executors' column names have tooltip

srowen · 2019-10-03T18:16:02Z

I mean, what text would the tooltip now show for the additional columns?

liucht-inspur · 2019-10-03T21:06:14Z

I mean, what text would the tooltip now show for the additional columns?

@srowen
I copy the code from Executors table's column tooltip in the same file，Before I revised it, it is like this

Before modification
Executors code as

srowen · 2019-10-03T23:18:55Z

I don't think that answers the question. What is the new tooltip that appears on what columns?

liucht-inspur · 2019-10-04T03:11:49Z

Can one of the admins verify this patch?

I don't think that answers the question. What is the new tooltip that appears on what columns?

Hello @srowen , I had screenshots and added comments, hope they are valuable to you,thanks!

liucht-inspur · 2019-10-04T03:50:34Z

@srowen My change is that
the column RDD Blocks add tooltip text 'RDD Blocks',
the column Disk Used add tooltip text 'Disk Used',
the column Cores add tooltip text 'Cores',
the column Active Tasks add tooltip text 'Active Tasks',
the column Failed Tasks add tooltip text 'Failed Tasks',
the column Complete Tasks add tooltip text 'Complete Tasks',
the column Total Tasks add tooltip text 'Total Tasks',

srowen · 2019-10-04T14:51:41Z

What is the point of the tooltip then? it just repeats the column name.

liucht-inspur · 2019-10-04T15:07:13Z

What is the point of the tooltip then? it just repeats the column name.

@srowen It's important for open source projects to have consistent style and user-friendly UI, and I'm working on keeping it consistent And more user-friendly.

srowen · 2019-10-04T15:11:41Z

Hm, no I don't think that adds anything to user-friendliness. It's just a redundant popup. If you made the tooltips meaningful, maybe so.

liucht-inspur · 2019-10-04T15:37:09Z

So, can you give some suggestions about the tootip text?

liucht-inspur · 2019-10-04T15:43:42Z

Hm, no I don't think that adds anything to user-friendliness. It's just a redundant popup. If you made the tooltips meaningful, maybe so.

@srowen I think it's necessary to be consistent in any case.

srowen · 2019-10-04T15:55:23Z

I don't think there's much meaningful to say in a tooltip here, so no I just wouldn't make this change.

liucht-inspur · 2019-10-08T06:45:39Z

@srowen For the same problem, I suggest adding more information in the columns of tooltip Active Tasks and Failed Tasks, because these two columns have different background colors, such as blue, red, and white, and they have different transparency, which is really confusing, what do you think?
See the columns of different background colors shown in the figure below

srowen · 2019-10-08T12:35:24Z

Yes, explaining the colors would be a reasonable role for a tooltip.

… colors and color opacity

liucht-inspur · 2019-10-09T07:41:35Z

@srowen ok,thank you ! I have finished this change,

two changes:
1、in Summary
before:
<th>Active Tasks</th>
<th>Failed Tasks</th>

after:
<th><span data-toggle="tooltip" data-placement="top" title="Active Tasks show in shaded blue. % of color opacity range from 0 to maxTasks.">Active Tasks</th>
<th><span data-toggle="tooltip" data-placement="top" title="Failed Tasks show in shaded red. Color opacity reach max at 10% of Total Tasks.">Failed Tasks</th>

added tooltip for Active Tasks and Failed Tasks ,the titles are
"Active Tasks show in shaded blue. % of color opacity range from 0 to maxTasks." and "Failed Tasks show in shaded red. Color opacity reach max at 10% of Total Tasks."

2、in Executors
before:
<th><span data-toggle="tooltip" data-placement="top" title="Active Tasks">Active Tasks</th>
<th><span data-toggle="tooltip" data-placement="top" title="Failed Tasks">Failed Tasks</th>

after:
<th><span data-toggle="tooltip" data-placement="top" title="Active Tasks show in shaded blue. % of color opacity range from 0 to maxTasks.">Active Tasks</th>
<th><span data-toggle="tooltip" data-placement="top" title="Failed Tasks show in shaded red. Color opacity reach max at 10% of Total Tasks.">Failed Tasks</th>

added more information for tooltip

Please help to review this change,thanks.

srowen · 2019-10-09T13:43:36Z

core/src/main/resources/org/apache/spark/ui/static/executorspage-template.html

        <th>Cores</th>
-        <th>Active Tasks</th>
-        <th>Failed Tasks</th>
+        <th><span data-toggle="tooltip" data-placement="top" title="Active Tasks show in shaded blue. % of color opacity range from 0 to maxTasks.">Active Tasks</span></th>


I don't think 'maxTasks' is meaningful to a user, and it's already clear it's blue. How about more like:
"Number of tasks currently executing. Darker shading highlights executors with more active tasks."

srowen · 2019-10-09T13:44:14Z

core/src/main/resources/org/apache/spark/ui/static/executorspage-template.html

-        <th>Active Tasks</th>
-        <th>Failed Tasks</th>
+        <th><span data-toggle="tooltip" data-placement="top" title="Active Tasks show in shaded blue. % of color opacity range from 0 to maxTasks.">Active Tasks</span></th>
+        <th><span data-toggle="tooltip" data-placement="top" title="Failed Tasks show in shaded red. Color opacity reach max at 10% of Total Tasks.">Failed Tasks</span></th>


Likewise, maybe:
"Number of tasks that have failed on this executor. Darker shading highlights executors with a high proportion of failed tasks."

Yes, they are more suitable，thank you！

liucht-inspur · 2019-10-10T01:33:05Z

@srowen Thanks again, I have finished the change.

srowen · 2019-10-10T17:56:17Z

We'll have to wait for Jenkins to come back, to evaluate this with tests, but I'm sure it will be OK.

liucht-inspur · 2019-10-11T01:41:40Z

cc @wangyum We are waiting for spark's Jenkins to test,can you help to authorize please?

wangyum · 2019-10-11T03:08:41Z

Sorry @liucht-inspur This has nothing to do with authorization:
http://apache-spark-developers-list.1001551.n3.nabble.com/build-system-IMPORTANT-northern-california-fire-danger-potential-power-outage-s-td28059.html

liucht-inspur · 2019-10-11T03:20:47Z

Ok, I see. We will wait quietly. Thank you all!

wangyum · 2019-10-12T07:01:05Z

retest this please

SparkQA · 2019-10-12T09:09:12Z

Test build #111957 has finished for PR 25994 at commit 49ffc0c.

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

wangyum · 2019-10-12T09:48:56Z

retest this please

SparkQA · 2019-10-12T12:21:47Z

Test build #111968 has finished for PR 25994 at commit 49ffc0c.

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

srowen · 2019-10-12T14:40:37Z

Merged to master

AbhishekNew · 2019-10-14T06:20:16Z

@liucht-inspur Did u handle the tooltip for the Live UI Page for Spark.

liucht-inspur · 2019-10-14T06:45:40Z

@liucht-inspur Did u handle the tooltip for the Live UI Page for Spark.

Yeah, exactly

dongjoon-hyun added the WEB UI label Oct 2, 2019

liucht-inspur commented Oct 3, 2019

View reviewed changes

add more infomation for active task and failed task to explaining the…

8b5cae2

… colors and color opacity

srowen requested changes Oct 9, 2019

View reviewed changes

modify the infomation for tooltips of Active Tasks and Failed Tasks

49ffc0c

liucht-inspur requested a review from srowen October 10, 2019 13:37

srowen approved these changes Oct 10, 2019

View reviewed changes

srowen closed this Oct 10, 2019

srowen reopened this Oct 10, 2019

srowen closed this in e94abd7 Oct 12, 2019

Conversation

liucht-inspur commented Oct 2, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changes were proposed in this pull request?

Why are the changes needed?

Does this PR introduce any user-facing change?

How was this patch tested?

Uh oh!

liucht-inspur left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

srowen commented Oct 3, 2019

Uh oh!

liucht-inspur commented Oct 3, 2019

Uh oh!

liucht-inspur commented Oct 3, 2019

Uh oh!

liucht-inspur commented Oct 3, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

srowen commented Oct 3, 2019

Uh oh!

liucht-inspur commented Oct 3, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

srowen commented Oct 3, 2019

Uh oh!

liucht-inspur commented Oct 4, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

liucht-inspur commented Oct 4, 2019

Uh oh!

srowen commented Oct 4, 2019

Uh oh!

liucht-inspur commented Oct 4, 2019

Uh oh!

srowen commented Oct 4, 2019

Uh oh!

liucht-inspur commented Oct 4, 2019

Uh oh!

liucht-inspur commented Oct 4, 2019

Uh oh!

srowen commented Oct 4, 2019

Uh oh!

liucht-inspur commented Oct 8, 2019

Uh oh!

srowen commented Oct 8, 2019

Uh oh!

liucht-inspur commented Oct 9, 2019

Uh oh!

srowen Oct 9, 2019

Choose a reason for hiding this comment

Uh oh!

srowen Oct 9, 2019

Choose a reason for hiding this comment

Uh oh!

liucht-inspur Oct 10, 2019

Choose a reason for hiding this comment

Uh oh!

liucht-inspur commented Oct 10, 2019

Uh oh!

srowen commented Oct 10, 2019

Uh oh!

liucht-inspur commented Oct 11, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wangyum commented Oct 11, 2019

Uh oh!

liucht-inspur commented Oct 11, 2019

Uh oh!

wangyum commented Oct 12, 2019

Uh oh!

SparkQA commented Oct 12, 2019

Uh oh!

wangyum commented Oct 12, 2019

Uh oh!

SparkQA commented Oct 12, 2019

Uh oh!

srowen commented Oct 12, 2019

liucht-inspur commented Oct 2, 2019 •

edited

Loading

liucht-inspur left a comment •

edited

Loading

liucht-inspur commented Oct 3, 2019 •

edited

Loading

liucht-inspur commented Oct 3, 2019 •

edited

Loading

liucht-inspur commented Oct 4, 2019 •

edited

Loading

liucht-inspur commented Oct 11, 2019 •

edited

Loading