[SPARK-33284][WEB-UI] In the Storage UI page, clicking any field to sort the table will cause the header content to be lost #30182
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
Author
|
cc @srowen @gengliangwang @sarutak , hi, please help me to review this pr, thanks a lot. |
Member
|
I don't know the code well, but seems reasonable, if you've verified it fixes the issue. |
Member
|
Jenkins test this please |
|
Kubernetes integration test starting |
|
Kubernetes integration test status failure |
|
Test build #130410 has finished for PR 30182 at commit
|
Contributor
Author
|
@srowen thanks, I verified the changed code and it is currently works well. |
Member
|
@cjn082030 does it look reasonable to you? |
Contributor
Author
|
Jenkins test this please |
Member
|
Merged to master/3.0 |
srowen
pushed a commit
that referenced
this pull request
Nov 3, 2020
…ort the table will cause the header content to be lost
### What changes were proposed in this pull request?
In the old version of spark in the storage UI page, the sorting function is normal, but sorting in the new version will cause the header content to be lost, So I try to fix the bug.
### Why are the changes needed?
The header field of the table on the page is similar to the following, **note that each th contains the span attribute**:
```html
<thead>
<tr>
....
<th width="" class="">
<span data-toggle="tooltip" title="" data-original-title="StorageLevel displays where the persisted RDD is stored, format of the persisted RDD (serialized or de-serialized) andreplication factor of the persisted RDD">
Storage Level
</span>
</th>
.....
</tr>
</thead>
```
Since [PR#26136](#26136), if the `th` in the table itself contains the `span` attribute, the `span` will be deleted directly after clicking the sort, and the original header content will be lost.
There are three problems in `sorttable.js`:
1. `sortrevind.class = "sorttable_sortrevind"` in [sorttab.js#107](https://github.com/apache/spark/blob/9d5e48ea95d1c3017a51ff69584f32a18901b2b5/core/src/main/resources/org/apache/spark/ui/static/sorttable.js#L107) and `sortfwdind.class = "sorttable_sortfwdind"` in [sorttab.js#125](https://github.com/apache/spark/blob/9d5e48ea95d1c3017a51ff69584f32a18901b2b5/core/src/main/resources/org/apache/spark/ui/static/sorttable.js#L125)
sorttable_xx attribute should be assigned to`className` instead of `class`, as javascript uses `rowlists[j].className.search` rather than `rowlists[j].class.search` to determine whether the component has a sorting flag or not.
2. `rowlists[j].className.search(/\sorttable_sortrevind\b/)` in [sorttab.js#120](https://github.com/apache/spark/blob/9d5e48ea95d1c3017a51ff69584f32a18901b2b5/core/src/main/resources/org/apache/spark/ui/static/sorttable.js#L120) was wrong. The original intention is to search whether `className` contains the word `sorttable_sortrevind` , but the expression is wrong, it should be `\bsorttable_sortrevind\b` instead of `\sorttable_sortrevind\b`
3. The if check statement in the following code snippet ([sorttab.js#141](https://github.com/apache/spark/blob/9d5e48ea95d1c3017a51ff69584f32a18901b2b5/core/src/main/resources/org/apache/spark/ui/static/sorttable.js#L141)) was wrong. **If the `search` function does not find the target, it will return -1, but Boolean(-1) is actually equals true**. This statement will cause span to be deleted even if it does not contain `sorttable_sortfwdind` or `sorttable_sortrevind`.
```javascript
rowlists = this.parentNode.getElementsByTagName("span");
for (var j=0; j < rowlists.length; j++) {
if (rowlists[j].className.search(/\bsorttable_sortfwdind\b/)
|| rowlists[j].className.search(/\sorttable_sortrevind\b/) ) {
rowlists[j].parentNode.removeChild(rowlists[j]);
}
}
```
### Does this PR introduce _any_ user-facing change?
NO.
### How was this patch tested?
The manual test result of the ui page is as below:
Closes #30182 from akiyamaneko/ui_storage_sort_error.
Authored-by: neko <[email protected]>
Signed-off-by: Sean Owen <[email protected]>
(cherry picked from commit 56c623e)
Signed-off-by: Sean Owen <[email protected]>
Member
|
Thank you, @akiyamaneko and @srowen ! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What changes were proposed in this pull request?
In the old version of spark in the storage UI page, the sorting function is normal, but sorting in the new version will cause the header content to be lost, So I try to fix the bug.
Why are the changes needed?
The header field of the table on the page is similar to the following, note that each th contains the span attribute:
Since PR#26136, if the
thin the table itself contains thespanattribute, thespanwill be deleted directly after clicking the sort, and the original header content will be lost.There are three problems in
sorttable.js:sortrevind.class = "sorttable_sortrevind"in sorttab.js#107 andsortfwdind.class = "sorttable_sortfwdind"in sorttab.js#125sorttable_xx attribute should be assigned to
classNameinstead ofclass, as javascript usesrowlists[j].className.searchrather thanrowlists[j].class.searchto determine whether the component has a sorting flag or not.rowlists[j].className.search(/\sorttable_sortrevind\b/)in sorttab.js#120 was wrong. The original intention is to search whetherclassNamecontains the wordsorttable_sortrevind, but the expression is wrong, it should be\bsorttable_sortrevind\binstead of\sorttable_sortrevind\bsearchfunction does not find the target, it will return -1, but Boolean(-1) is actually equals true. This statement will cause span to be deleted even if it does not containsorttable_sortfwdindorsorttable_sortrevind.Does this PR introduce any user-facing change?
NO.
How was this patch tested?
The manual test result of the ui page is as below: