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

PDavid · 2024-11-22T08:38:23Z

⚠️ 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

Region Server UI

Thrift UI

PDavid · 2024-11-22T09:21:53Z

hbase-server/src/main/resources/hbase-webapps/master/table.jsp

-<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>


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

PDavid · 2024-11-22T09:23:01Z

hbase-thrift/src/main/resources/hbase-webapps/static/hbase_logo_small.png

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.

NihalJain · 2024-11-22T11:13:09Z

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

PDavid · 2024-11-22T11:21:17Z

Many thanks @NihalJain !

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

PDavid · 2024-11-25T06:55:19Z

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

PDavid · 2024-12-03T12:50:50Z

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

NihalJain · 2024-12-03T18:39:22Z

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 · 2024-12-04T07:42:30Z

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

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.

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.

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

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 · 2024-12-04T08:08:35Z

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

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.

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.

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

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 · 2024-12-04T08:12:21Z

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 · 2024-12-04T12:57:45Z

OK, now the pages are looking like this:

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.

NihalJain · 2024-12-04T13:03:08Z

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

NihalJain · 2024-12-09T06:45:26Z

hbase-server/src/main/resources/hbase-webapps/master/table.jsp

  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"


All the removed imports were redundant right?

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

NihalJain · 2024-12-09T07:31:12Z

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:

Can be fixed by replacing with border-style: solid with border-top: 1px solid #ddd;?

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

NihalJain · 2024-12-09T07:33:35Z

+1, LGTM

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

NihalJain · 2024-12-09T07:34:18Z

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

stoty · 2024-12-09T07:48:25Z

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

PDavid · 2024-12-09T07:59:05Z

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.

NihalJain · 2024-12-12T09:21:15Z

Prepared backport PR-s for the active branches here:

branch-2: HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 #6524

branch-2.5: HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 #6525

branch-2.6: HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 #6526

branch-3: HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 #6527

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

ndimiduk

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 .

ndimiduk · 2024-12-12T09:41:23Z

hbase-server/src/main/resources/hbase-webapps/static/favicon.ico

Hah, nice :)

PDavid · 2024-12-12T11:32:19Z

Prepared backport PR-s for the active branches here:

branch-2: HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 #6524

branch-2.5: HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 #6525

branch-2.6: HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 #6526

branch-3: HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 #6527

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 · 2024-12-12T12:27:35Z

@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 · 2024-12-12T12:55:40Z

@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 · 2024-12-16T13:30:42Z

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

branch-2.5: HBASE-29028 Backport missing UI patches to branch-2.5 #6542
branch-2.6: HBASE-29036 Backport missing UI patches to branch-2.6 #6546
branch-2: HBASE-29028 Backport missing UI patches to branch-2 #6548

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

ndimiduk · 2024-12-16T14:17:23Z

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

NihalJain · 2024-12-16T14:34:07Z

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

branch-2.5: HBASE-29028 Backport missing UI patches to branch-2.5 #6542

branch-2.6: HBASE-29028 Backport missing UI patches to branch-2.6 #6546

branch-2: HBASE-29028 Backport missing UI patches to branch-2 #6548

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

ndimiduk · 2024-12-18T12:53:01Z

I think that all four of these Jiras are fine to backport to active release lines. It's a shame they weren't backported originally.

NihalJain · 2024-12-24T06:28:05Z

Planning to merge this today to master and branch-3 (with #6527). We can merge the branch-2 backport of this one, once those PRs are rebased post missing patch PR merge.

…3.3 (#6527) (#6490) ### Details First we 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: - https://getbootstrap.com/docs/4.6/migration/ - https://getbootstrap.com/docs/5.3/migration/ 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. Signed-off-by: Nick Dimiduk <[email protected]> Signed-off-by: Nihal Jain <[email protected]>

…3.3 (apache#6490) ### Details First we 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: - https://getbootstrap.com/docs/4.6/migration/ - https://getbootstrap.com/docs/5.3/migration/ 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. Signed-off-by: Nick Dimiduk <[email protected]> Signed-off-by: Nihal Jain <[email protected]>

…3.3 (apache#6490) First we 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: - https://getbootstrap.com/docs/4.6/migration/ - https://getbootstrap.com/docs/5.3/migration/ 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. - 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. Signed-off-by: Nick Dimiduk <[email protected]> Signed-off-by: Nihal Jain <[email protected]> (cherry picked from commit 744ce13)

…3.3 (#6524) * HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 (#6490) First we 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: - https://getbootstrap.com/docs/4.6/migration/ - https://getbootstrap.com/docs/5.3/migration/ 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. - 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. Signed-off-by: Nick Dimiduk <[email protected]> Signed-off-by: Nihal Jain <[email protected]> (cherry picked from commit 744ce13) * HBASE-28832 Fixed TestInfoServersACL test There were some changes in the Bootstrap upgrade which caused the test to fail because the test expected certain text to appear on the UI page. (cherry picked from commit eba6a85)

…3.3 (apache#6490) First we 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: - https://getbootstrap.com/docs/4.6/migration/ - https://getbootstrap.com/docs/5.3/migration/ 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. - 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. Signed-off-by: Nick Dimiduk <[email protected]> Signed-off-by: Nihal Jain <[email protected]> (cherry picked from commit 744ce13)

…3.3 (#6526) * HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 (#6490) First we 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: - https://getbootstrap.com/docs/4.6/migration/ - https://getbootstrap.com/docs/5.3/migration/ 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. - 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. Signed-off-by: Nick Dimiduk <[email protected]> Signed-off-by: Nihal Jain <[email protected]> (cherry picked from commit 744ce13) * [ADDENDUM] HBASE-28832 Fixed TestInfoServersACL test (#6571) * There were some changes in the Bootstrap upgrade which caused the test to fail because the test expected certain text to appear on the UI page. (cherry picked from commit 43f728c) Signed-off-by: Peter Somogyi <[email protected]>

…3.3 (#6525) * HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 (#6490) First we 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: - https://getbootstrap.com/docs/4.6/migration/ - https://getbootstrap.com/docs/5.3/migration/ 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. - 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. Signed-off-by: Nick Dimiduk <[email protected]> Signed-off-by: Nihal Jain <[email protected]> (cherry picked from commit 744ce13) * [ADDENDUM] HBASE-28832 Fixed TestInfoServersACL test (#6571) * There were some changes in the Bootstrap upgrade which caused the test to fail because the test expected certain text to appear on the UI page. (cherry picked from commit 43f728c) Signed-off-by: Peter Somogyi <[email protected]>

…3.3 (apache#6524) * HBASE-28832 Upgrade from bootstrap 3.4.1 to non vulnerable version 5.3.3 (apache#6490) First we 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: - https://getbootstrap.com/docs/4.6/migration/ - https://getbootstrap.com/docs/5.3/migration/ 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. - 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. Signed-off-by: Nick Dimiduk <[email protected]> Signed-off-by: Nihal Jain <[email protected]> (cherry picked from commit 744ce13) * HBASE-28832 Fixed TestInfoServersACL test There were some changes in the Bootstrap upgrade which caused the test to fail because the test expected certain text to appear on the UI page. (cherry picked from commit eba6a85)

PDavid force-pushed the HBASE-28832-bootstrap-upgrade-5 branch from df88b62 to f2c49c1 Compare November 22, 2024 09:18

PDavid commented Nov 22, 2024

View reviewed changes

This comment has been minimized.

Sign in to view

PDavid mentioned this pull request Nov 22, 2024

HBASE-28983 Static resources are not loaded on REST web UI pages in dev mode #6491

Merged

This comment has been minimized.

Sign in to view

PDavid marked this pull request as ready for review November 25, 2024 06:55

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

This comment has been minimized.

Sign in to view

NihalJain reviewed Dec 9, 2024

View reviewed changes

NihalJain approved these changes Dec 9, 2024

View reviewed changes

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

ndimiduk approved these changes Dec 12, 2024

View reviewed changes

hbase-server/src/main/resources/hbase-webapps/static/favicon.ico

Copy link

Member

ndimiduk Dec 12, 2024

Choose a reason for hiding this comment

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

Hah, nice :)

PDavid reacted with thumbs up emoji

NihalJain merged commit 744ce13 into apache:master Dec 24, 2024
1 check failed

PDavid mentioned this pull request Jan 6, 2025

HBASE-28832 Fixed TestInfoServersACL test #6571

Merged

PDavid deleted the HBASE-28832-bootstrap-upgrade-5 branch January 6, 2025 14:53

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

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

Uh oh!

Conversation

PDavid commented Nov 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Changes

Screen shots

Uh oh!

PDavid Nov 22, 2024

Choose a reason for hiding this comment

Uh oh!

PDavid Nov 22, 2024

Choose a reason for hiding this comment

Uh oh!

This comment has been minimized.

NihalJain commented Nov 22, 2024

Uh oh!

PDavid commented Nov 22, 2024

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

PDavid commented Nov 25, 2024

Uh oh!

PDavid commented Dec 3, 2024

Uh oh!

NihalJain commented Dec 3, 2024

Uh oh!

NihalJain commented Dec 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Have a few suggestions though

Uh oh!

PDavid commented Dec 4, 2024

Have a few suggestions though

Uh oh!

NihalJain commented Dec 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PDavid commented Dec 4, 2024

Uh oh!

NihalJain commented Dec 4, 2024

Uh oh!

This comment has been minimized.

This comment has been minimized.

NihalJain Dec 9, 2024

Choose a reason for hiding this comment

Uh oh!

PDavid Dec 9, 2024

Choose a reason for hiding this comment

Uh oh!

NihalJain commented Dec 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NihalJain commented Dec 9, 2024

Uh oh!

NihalJain commented Dec 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stoty commented Dec 9, 2024

Uh oh!

PDavid commented Dec 9, 2024

Uh oh!

NihalJain commented Dec 12, 2024

Uh oh!

ndimiduk left a comment

Choose a reason for hiding this comment

Uh oh!

ndimiduk Dec 12, 2024

Choose a reason for hiding this comment

Uh oh!

PDavid commented Dec 12, 2024

Uh oh!

ndimiduk commented Dec 12, 2024

Uh oh!

PDavid commented Dec 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PDavid commented Dec 16, 2024

PDavid commented Nov 22, 2024 •

edited

Loading

NihalJain commented Dec 4, 2024 •

edited

Loading

NihalJain commented Dec 4, 2024 •

edited

Loading

NihalJain commented Dec 9, 2024 •

edited

Loading

NihalJain commented Dec 9, 2024 •

edited

Loading

PDavid commented Dec 12, 2024 •

edited

Loading

NihalJain commented Dec 16, 2024 •

edited

Loading