Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 #6490

Open
wants to merge 20 commits into
base: master
Choose a base branch
from

Conversation

PDavid
Copy link
Contributor

@PDavid PDavid commented Nov 22, 2024

⚠️ Sorry, this PR is quite huge but I did not found a better way to slice the changes to smaller changesets.

It helps, if you turn off whitespace changes in the diff view and when you can check the changes by commits.

Details

First I upgraded to Bootstrap v4 - this was the majority of the changes - and then I upgraded to Bootstrap 5.3.3 - which is the latest non-vulnerable version according to https://security.snyk.io/package/npm/bootstrap/3.4.1

Changes were based on the migration documentation:

Most of the changes are related to navbar-s, tabs and forms.

The new Bootstrap look has a bit bigger font sizes but it is still OK in my opinion.

Bootstrap v5 is not requiring JQuery anymore but we have some JQuery plugins (jquery.tablesorter.min.js, tab.js) which still need it so I left JQuery in.

Changes

  • Removed bootstrap-theme.min.css and Glyphicons icon font because these are not present anymore in newer Bootstrap versions.
  • Upgraded checked in Bootstrap CSS and JS files to v4.
  • Moved some inline CSS styles to hbase.css file (DRY).
  • The page-header class was dropped in Bootstrap v4 so added page-header small grey color to hbase.css.
  • Removed some unused imports in JSP files.
  • Improved the styling of the Log Level form
  • Replaced hbase_logo_small.png under thrift module with the hbase-server one. Reason: to make sure that they are the same size (this under thrift was smaller).
  • Upgraded checked in Bootstrap CSS and JS files to v5.
  • Migrated navbars for v5:
    • Navbars now require a container within (to drastically simplify spacing requirements and CSS required).
    • The .active class can no longer be applied to .nav-items, it must be applied directly on .nav-links.
  • Migrated data attributes. Data attributes for all Bootstrap JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.
  • form-inline was dropped in v5, so inline forms had to be styled with grid and utilities instead.
  • Added the favicon of the HBase website to the web UI pages.

Screen shots

Master UI

image

Region Server UI

image

Thrift UI

image

@PDavid PDavid force-pushed the HBASE-28832-bootstrap-upgrade-5 branch from df88b62 to f2c49c1 Compare November 22, 2024 09:18
Comment on lines -1270 to -1272
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here I removed these JQuery and Bootstrap JavaScript includes because footer.jsp is included just above and that includes these already.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here I replaced hbase_logo_small.png under thrift module with the hbase-server one. Reason: to make sure that they are the same size (this under thrift was smaller).

If required this can be undone but I think it is more consistent this way.

@Apache-HBase

This comment has been minimized.

@NihalJain
Copy link
Contributor

Thanks for working on this @PDavid. Will try to build code locally and review the changes once the PR is ready.

@PDavid
Copy link
Contributor Author

PDavid commented Nov 22, 2024

Many thanks @NihalJain !

I'll wait for the CI build and then I'll change this PR to ready to review.

@Apache-HBase

This comment has been minimized.

@Apache-HBase

This comment has been minimized.

@Apache-HBase

This comment has been minimized.

@PDavid
Copy link
Contributor Author

PDavid commented Nov 25, 2024

The TestRegionServerReportForDuty test has been failed in the PR build because of timeout - it is unrelated.

@PDavid PDavid marked this pull request as ready for review November 25, 2024 06:55
@PDavid
Copy link
Contributor Author

PDavid commented Dec 3, 2024

Hi @NihalJain,
If you'll have some time, can you please review this? 🙏

@NihalJain
Copy link
Contributor

Hi @NihalJain,

If you'll have some time, can you please review this? 🙏

Ah yes, caught up at work, will review as soon as I have some bandwidth.

@NihalJain
Copy link
Contributor

NihalJain commented Dec 4, 2024

Hi @PDavid I checked out code and had a look at Master and RS pages. All pages seem to work perfectly fine in these 2 web UIs, that's great work, thanks :)

Have a few suggestions though

  1. Styling/Colors

Can we make the UI coloring look similar to what we had before? For example now the blue colors are very dark over the dull blue we had earlier, which was not very heavy on eyes.

You could try to override default bootstrap.css in hbase.css? For example replacing reference to #0d6efd with #337ab7 results in following.

Screenshot 2024-12-04 at 1 03 51 PM

Would need to compare with old HBase UI where ever we have noticeable discrepancy in colors. Although it should be fine if new colors looks better than before.


  1. Active Tab Indicator

Also the active navbar highlighting is either broken or not as before. Can this be fixed? This is how it used to render earlier

Screenshot 2024-12-04 at 1 07 39 PM


BTW I have not looked at code changes line by line as of yet, have just tried the change locally. Will review code and other web pages soon. Overall things look good to me visually.

@PDavid
Copy link
Contributor Author

PDavid commented Dec 4, 2024

Hi @PDavid I checked out code and had a look at Master and RS pages. All pages seem to work perfectly fine in these 2 web UIs, that's great work, thanks :)

Have a few suggestions though

  1. Styling/Colors

Can we make the UI coloring look similar to what we had before? For example now the blue colors are very dark over the dull blue we had earlier, which was not very heavy on eyes.

You could try to override default bootstrap.css in hbase.css? For example replacing reference to #0d6efd with #337ab7 results in following.

Screenshot 2024-12-04 at 1 03 51 PM

Would need to compare with old HBase UI where ever we have noticeable discrepancy in colors. Although it should be fine if new colors looks better than before.

  1. Active Tab Indicator

Also the active navbar highlighting is either broken or not as before. Can this be fixed? This is how it used to render earlier

Screenshot 2024-12-04 at 1 07 39 PM

BTW I have not looked at code changes line by line as of yet, have just tried the change locally. Will review code and other web pages soon. Overall things look good to me visually.

Hi @NihalJain,

Many thanks for the feedback! 👍

To be completely honest I was not sure how important it is to preserve the look and styling of the current HBase UI. Of course I'll' look into it and restore these.

@NihalJain
Copy link
Contributor

NihalJain commented Dec 4, 2024

To be completely honest I was not sure how important it is to preserve the look and styling of the current HBase UI. Of course I'll' look into it and restore these.

Thats right. As long as it looks visually same/better we are good.

Blue color seemed too dark to me, and as for active bar indicator maybe we can just bold the text? currently it is not highligted appropriately. Need not try to replicate how it looked before. That would be an over kill.

@PDavid PDavid force-pushed the HBASE-28832-bootstrap-upgrade-5 branch from aefcd2d to d8541cf Compare December 4, 2024 12:51
@PDavid
Copy link
Contributor Author

PDavid commented Dec 4, 2024

OK, now the pages are looking like this:
image

image

Also fixed a smaller issue with the pagination in jqSpager.js (used by the "Regions in Transition" section on master status page) so that the paginator links are styled and displayed properly.
image

@NihalJain
Copy link
Contributor

Thanks @PDavid. Let me do another round of testing and come back to you soon.

@Apache-HBase

This comment has been minimized.

@Apache-HBase

This comment has been minimized.

import="org.apache.hadoop.hbase.RegionMetrics"
import="org.apache.hadoop.hbase.RegionMetricsBuilder"
import="org.apache.hadoop.hbase.ServerMetrics"
import="org.apache.hadoop.hbase.ServerName"
import="org.apache.hadoop.hbase.Size"
import="org.apache.hadoop.hbase.TableName"
import="org.apache.hadoop.hbase.TableNotFoundException"
import="org.apache.hadoop.hbase.client.AsyncAdmin"
import="org.apache.hadoop.hbase.client.AsyncConnection"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All the removed imports were redundant right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exactly. These were unused imports which were highlighted by IntelliJ.

@NihalJain
Copy link
Contributor

NihalJain commented Dec 9, 2024

Hi @PDavid I have reviewed the updated pages and also had a look at REST and THRIFT pages. All looks good to me.

Just a NIT: Can we fix this? I see two lines in all table boundaries. For eg:

  1. Screenshot 2024-12-09 at 12 57 39 PM

  1. Screenshot 2024-12-09 at 12 57 32 PM

Can be fixed by replacing with border-style: solid with border-top: 1px solid #ddd;?
Screenshot 2024-12-09 at 12 53 08 PM


Not important though, you can decide if you would want to fix.

@NihalJain
Copy link
Contributor

+1, LGTM

Hi @Apache9, @ndimiduk, @stoty Got some bandwidth to check this out?

@NihalJain
Copy link
Contributor

NihalJain commented Dec 9, 2024

Also @PDavid please ensure to sync JIRA title and PR title

@stoty
Copy link
Contributor

stoty commented Dec 9, 2024

My front end experience is minimal, so I'm not really qualified to review this.

@PDavid PDavid changed the title HBASE-28832 Upgraded Bootstrap to 5 HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 Dec 9, 2024
@PDavid
Copy link
Contributor Author

PDavid commented Dec 9, 2024

Also @PDavid please ensure to sync JIRA title and PR title

Thanks, I changed the PR title to be the same as the Jira title.

 Reason: to make sure that they are the same size (this under thrift was smaller).
This is the latest non-vulnerable version.
- Navbars now require a container within (to drastically simplify spacing requirements and CSS required).
- The .active class can no longer be applied to .nav-items, it must be applied directly on .nav-links.
Data attributes for all Bootstrap JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.
Breaking change in Bootstrap 5: Dropped form-specific layout classes for our grid system. Use our grid and utilities instead of .form-group, .form-row, or .form-inline.
to make the UI coloring look similar to what we had before.
to make sure the current active navbar link is highlighted appropriately.
(used by the "Regions in Transition" section on master status page) so that the paginator links are styled and displayed properly.
Before the tab content has its own bottom border and table row also had its own bottom border.
This resulted in having two lines in all table boundaries.

Fix is to remove the bottom border of the table row.
Make sure background color is visible in tables (Tasks) where alert class is used.
@PDavid PDavid force-pushed the HBASE-28832-bootstrap-upgrade-5 branch from da71040 to 97972c8 Compare December 11, 2024 12:46
@PDavid
Copy link
Contributor Author

PDavid commented Dec 11, 2024

With more testing I found some smaller issues which I now fixed and just pushed. I think this is ready now.

So that buttons and textfields are displayed properly.
Also removes unneeded inline styles.
@PDavid PDavid force-pushed the HBASE-28832-bootstrap-upgrade-5 branch from 97972c8 to bbe00c0 Compare December 11, 2024 13:18
@Apache-HBase

This comment has been minimized.

@Apache-HBase

This comment has been minimized.

@Apache-HBase
Copy link

💔 -1 overall

Vote Subsystem Runtime Logfile Comment
+0 🆗 reexec 0m 44s Docker mode activated.
-0 ⚠️ yetus 0m 3s Unprocessed flag(s): --brief-report-file --spotbugs-strict-precheck --author-ignore-list --blanks-eol-ignore-file --blanks-tabs-ignore-file --quick-hadoopcheck
_ Prechecks _
_ master Compile Tests _
+0 🆗 mvndep 0m 9s Maven dependency ordering for branch
+1 💚 mvninstall 2m 44s master passed
+1 💚 compile 1m 53s master passed
+1 💚 javadoc 3m 28s master passed
+1 💚 shadedjars 4m 50s branch has no errors when building our shaded downstream artifacts.
_ Patch Compile Tests _
+0 🆗 mvndep 0m 13s Maven dependency ordering for patch
+1 💚 mvninstall 3m 59s the patch passed
+1 💚 compile 2m 47s the patch passed
+1 💚 javac 2m 47s the patch passed
+1 💚 javadoc 3m 40s the patch passed
+1 💚 shadedjars 5m 4s patch has no errors when building our shaded downstream artifacts.
_ Other Tests _
-1 ❌ unit 2m 51s /patch-unit-root.txt root in the patch failed.
34m 34s
Subsystem Report/Notes
Docker ClientAPI=1.47 ServerAPI=1.47 base: https://ci-hbase.apache.org/job/HBase-PreCommit-GitHub-PR/job/PR-6490/7/artifact/yetus-jdk17-hadoop3-check/output/Dockerfile
GITHUB PR #6490
Optional Tests javac javadoc unit compile shadedjars
uname Linux d11c45156abc 5.4.0-200-generic #220-Ubuntu SMP Fri Sep 27 13:19:16 UTC 2024 x86_64 x86_64 x86_64 GNU/Linux
Build tool maven
Personality dev-support/hbase-personality.sh
git revision master / bbe00c0
Default Java Eclipse Adoptium-17.0.11+9
Test Results https://ci-hbase.apache.org/job/HBase-PreCommit-GitHub-PR/job/PR-6490/7/testReport/
Max. process+thread count 311 (vs. ulimit of 30000)
modules C: hbase-resource-bundle hbase-http hbase-server hbase-thrift hbase-rest . U: .
Console output https://ci-hbase.apache.org/job/HBase-PreCommit-GitHub-PR/job/PR-6490/7/console
versions git=2.34.1 maven=3.9.8
Powered by Apache Yetus 0.15.0 https://yetus.apache.org

This message was automatically generated.

@Apache-HBase
Copy link

🎊 +1 overall

Vote Subsystem Runtime Logfile Comment
+0 🆗 reexec 0m 31s Docker mode activated.
_ Prechecks _
+1 💚 dupname 0m 0s No case conflicting files found.
+0 🆗 codespell 0m 0s codespell was not available.
+0 🆗 detsecrets 0m 0s detect-secrets was not available.
+0 🆗 jshint 0m 0s jshint was not available.
+0 🆗 shelldocs 0m 0s Shelldocs was not available.
+1 💚 @author 0m 0s The patch does not contain any @author tags.
+1 💚 hbaseanti 0m 0s Patch does not have any anti-patterns.
_ master Compile Tests _
+0 🆗 mvndep 0m 12s Maven dependency ordering for branch
+1 💚 mvninstall 3m 46s master passed
+1 💚 compile 9m 47s master passed
+1 💚 checkstyle 1m 19s master passed
+1 💚 spotbugs 16m 16s master passed
+1 💚 spotless 1m 9s branch has no errors when running spotless:check.
_ Patch Compile Tests _
+0 🆗 mvndep 0m 15s Maven dependency ordering for patch
+1 💚 mvninstall 3m 46s the patch passed
+1 💚 compile 9m 17s the patch passed
+1 💚 javac 9m 17s the patch passed
+1 💚 blanks 0m 0s The patch has no blanks issues.
+1 💚 checkstyle 1m 19s the patch passed
+1 💚 shellcheck 0m 0s No new issues.
+1 💚 spotbugs 13m 22s the patch passed
+1 💚 hadoopcheck 12m 9s Patch does not cause any errors with Hadoop 3.3.6 3.4.0.
+1 💚 spotless 0m 48s patch has no errors when running spotless:check.
_ Other Tests _
+1 💚 asflicense 0m 54s The patch does not generate ASF License warnings.
84m 11s
Subsystem Report/Notes
Docker ClientAPI=1.43 ServerAPI=1.43 base: https://ci-hbase.apache.org/job/HBase-PreCommit-GitHub-PR/job/PR-6490/7/artifact/yetus-general-check/output/Dockerfile
GITHUB PR #6490
Optional Tests dupname asflicense javac spotbugs checkstyle codespell detsecrets compile hadoopcheck hbaseanti spotless jshint shellcheck shelldocs
uname Linux 6173253c58ed 5.4.0-1103-aws #111~18.04.1-Ubuntu SMP Tue May 23 20:04:10 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux
Build tool maven
Personality dev-support/hbase-personality.sh
git revision master / bbe00c0
Default Java Eclipse Adoptium-17.0.11+9
Max. process+thread count 188 (vs. ulimit of 30000)
modules C: hbase-resource-bundle hbase-http hbase-server hbase-thrift hbase-rest . U: .
Console output https://ci-hbase.apache.org/job/HBase-PreCommit-GitHub-PR/job/PR-6490/7/console
versions git=2.34.1 maven=3.9.8 spotbugs=4.7.3 shellcheck=0.8.0
Powered by Apache Yetus 0.15.0 https://yetus.apache.org

This message was automatically generated.

@NihalJain
Copy link
Contributor

Prepared backport PR-s for the active branches here:

Hi @PDavid thanks for all the backports, would be really helpful if you could mention the why the diffs are substantially smaller in branch-2.x vs master, a brief summary should suffice mentioning any extra/missing changes worth reviewing over there

Copy link
Member

@ndimiduk ndimiduk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I skimmed through. Looks like the annotations for new bootstrap are more verbose than old. A lot of change for no changes. I'll defer to @NihalJain for fine-tuning, otherwise this looks good to me.

For your question on the mailing list, I think you're headed in the right direction.

Thanks a lot for taking on both points @PDavid .

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hah, nice :)

@PDavid
Copy link
Contributor Author

PDavid commented Dec 12, 2024

Prepared backport PR-s for the active branches here:

Hi @PDavid thanks for all the backports, would be really helpful if you could mention the why the diffs are substantially smaller in branch-2.x vs master, a brief summary should suffice mentioning any extra/missing changes worth reviewing over there

Hi @NihalJain,

Sure thing, thanks.
So in the branch-2.x branches the web code is a bit different (I think some patches were not merged there in the past). Differences are for example:

  • in some of the branch-2.x branches there are no header.jsp / footer.jsp in hbase-rest and hbase-thrift (or they are there for rest but not for thrift, etc)
  • there is no processRest.jsp
  • navbars do not contain the dropdown for Prometheus links.
  • also table.jsp was a little bit different - for example most of those imports which were unused on master were still used on branch-2.x

So because the web code was different, when I cherry-picked my commits I had to adapt the changes.

I hope this answers your question. :)

@ndimiduk
Copy link
Member

@PDavid if you can identify specific JIRAs that need to be backported, i find that it's better/easier to do that work than to maintain and enhance divergence between the branches. If you're up for it, can you backport those missing changes and rebase your branch-2 changes here on top of those backports?

@PDavid
Copy link
Contributor Author

PDavid commented Dec 12, 2024

@PDavid if you can identify specific JIRAs that need to be backported, i find that it's better/easier to do that work than to maintain and enhance divergence between the branches. If you're up for it, can you backport those missing changes and rebase your branch-2 changes here on top of those backports?

Hi @ndimiduk,
Thanks for your suggestion, this actually makes perfect sense. I'll do this then.
These are missing for sure from some of the branch-2.x branches:

I'll look for the other differences.

@PDavid
Copy link
Contributor Author

PDavid commented Dec 16, 2024

Hi @ndimiduk and @NihalJain,
I prepared the following backport PR-s:

What do you think? Is the approach good or should we have one PR per patch?

@ndimiduk
Copy link
Member

You can present a single PR for all the backports for a particular branch. However, our process requires one commit per JIRA.

@NihalJain
Copy link
Contributor

NihalJain commented Dec 16, 2024

Hi @ndimiduk and @NihalJain, I prepared the following backport PR-s:

What do you think? Is the approach good or should we have one PR per patch?

Thank you @PDavid for the effort. Will have a look at the changes and reply back soon. Will hold merging this for now so that we can revisit/rebase backport of this PR once the new PRs for each branch is merged. Hopefully backports will be a lot similar post the missing JIRAs commit.

FYI @apurtell @Apache9: I hope you are fine with backporting missing JIRAs to active 2.x branches with #6542, #6546 and #6548

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants