Upgrade web UI from Bootstrap 3 to Bootstrap 5.3 by renecannao · Pull Request #76 · ProxySQL/orchestrator

renecannao · 2026-04-08T01:22:03Z

Summary

Modernizes the orchestrator web UI by upgrading from Bootstrap 3 to Bootstrap 5.3, loaded via CDN. This replaces the bundled, outdated Bootstrap 3 assets with a current framework version.

Bootstrap 5.3 CDN: CSS and JS bundle loaded from jsDelivr with SRI hashes, replacing the local Bootstrap 3 files
Template migration: All 12 template files updated — navbar uses BS5 markup (nav-item, nav-link, dropdown-item), panels converted to cards, btn-default to btn-secondary, sr-only to visually-hidden
Modern CSS: Added CSS custom properties for theming (primary color, background, card styling), system font stack, improved navbar with shadow, and card-based panel styling
Backward compatibility: JS bridge script maps legacy data-toggle/data-dismiss attributes to BS5 equivalents so existing JavaScript continues to work without modification

Closes #74

Test plan

Verify the web UI loads correctly with Bootstrap 5.3 CDN assets
Test navbar dropdowns (Home, Clusters, Audit) open and close properly
Test the search form in the navbar
Test the instance modal dialog opens/closes (Done button, X button)
Verify card-based panels render correctly on About, Audit, Status, Discover pages
Test instance problems dropdown in the top-right corner
Verify responsive collapse (hamburger menu) works on narrow viewports
Confirm go build succeeds (verified locally)

Summary by CodeRabbit

New Features
- Added CSS theme variables for consistent color and styling across the application.
- Introduced a client-side compatibility layer for enhanced UI interactions.
UI/Styling
- Upgraded framework from Bootstrap 3 to Bootstrap 5 for modern design and improved accessibility.
- Redesigned UI component styling with refreshed navbar and card-based layouts.
- Updated top navigation bar with enhanced mobile responsiveness.

Modernize the orchestrator web interface by upgrading to Bootstrap 5.3 via CDN, replacing the bundled Bootstrap 3 files. This addresses the outdated look and feel of the UI. Changes: - Update Bootstrap CSS/JS to 5.3.3 CDN links in layout.tmpl - Migrate navbar to BS5 markup (navbar-expand-md, nav-item, nav-link) - Replace BS3 data attributes (data-toggle -> data-bs-toggle, etc.) - Convert panel components to cards across all templates - Replace btn-default with btn-secondary - Replace sr-only with visually-hidden - Add CSS custom properties for theming (colors, fonts, shadows) - Add system font stack and improved navbar/card styling - Add BS3->BS5 compatibility helpers (pull-left/right, input-sm, btn-xs) - Add JS compatibility bridge for legacy data-toggle/data-dismiss attrs used by existing JavaScript (avoids rewriting JS logic) - Remove IE8 shim (no longer needed) Closes #74

coderabbitai · 2026-04-08T01:22:19Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e96433c3-a66d-4e92-9bce-a6258326d322

📥 Commits

Reviewing files that changed from the base of the PR and between 97eb0db and 70065f9.

📒 Files selected for processing (12)

resources/public/css/orchestrator.css
resources/templates/about.tmpl
resources/templates/agent.tmpl
resources/templates/agent_seed_details.tmpl
resources/templates/audit.tmpl
resources/templates/audit_failure_detection.tmpl
resources/templates/audit_recovery.tmpl
resources/templates/discover.tmpl
resources/templates/faq.tmpl
resources/templates/layout.tmpl
resources/templates/seeds.tmpl
resources/templates/status.tmpl

📝 Walkthrough

Walkthrough

This pull request modernizes the web UI by migrating from Bootstrap 3 to Bootstrap 5 across all templates and stylesheets. Changes include introducing CSS theme variables, updating navbar and modal markup to Bootstrap 5 conventions, replacing panel-based layouts with card components, and adding a client-side compatibility layer for legacy Bootstrap 3 attributes.

Changes

Cohort / File(s)	Summary
CSS Theme & Component Styling `resources/public/css/orchestrator.css`	Introduced `:root` CSS variables for theme colors, font family, and card styling. Added `.navbar`, `.card`, `.card-header` component styles, and utility classes (`.pull-left`, `.pull-right`, `.input-sm`, `.btn-xs`, `.glyphicon`). Increased body top padding from 50px to 56px. Updated `.panel-body` references to `.card-body`.
Layout & Navigation Framework `resources/templates/layout.tmpl`	Migrated navbar from Bootstrap 3 (`navbar-inverse`, `data-toggle`) to Bootstrap 5 (`navbar-expand-md`, `data-bs-toggle`). Updated modals from `data-dismiss="modal"` to `data-bs-dismiss="modal"` and `.close` button to `.btn-close`. Changed downtime panel markup to card components. Added client-side compatibility script to intercept legacy Bootstrap 3 data attributes and map them to Bootstrap 5 APIs.
Template Component Updates `resources/templates/about.tmpl`, `agent.tmpl`, `agent_seed_details.tmpl`, `audit.tmpl`, `audit_failure_detection.tmpl`, `audit_recovery.tmpl`, `discover.tmpl`, `faq.tmpl`, `seeds.tmpl`, `status.tmpl`	Uniform replacement of Bootstrap 3 panel layout classes with Bootstrap 5 card equivalents: `panel panel-default` → `card`, `panel-heading` → `card-header`, `panel-body` → `card-body`, `panel-footer` → `card-footer`. No changes to internal markup, scripts, or data attributes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 From panels old to cards so bright,
Bootstrap marches into light,
Variables dance in CSS blue,
Navbars flex and modals too,
A modern web UI shines anew! ✨

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch issue74-web-ui-refresh

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist

Code Review

This pull request migrates the application's frontend from Bootstrap 3 to Bootstrap 5.3.3. Key changes include the introduction of modern theme variables in the global CSS, the replacement of legacy panel components with cards, and a comprehensive refactoring of the navbar and modals to align with Bootstrap 5 syntax and data attributes. The review feedback identifies several improvement opportunities related to the migration, specifically addressing the loss of Glyphicon support, the removal of obsolete caret elements, and the adoption of the Bootstrap Alert API for more robust element dismissal.

gemini-code-assist · 2026-04-08T01:24:06Z

resources/public/css/orchestrator.css

+}
+
+.glyphicon {
+    font-family: "Glyphicons Halflings";


Bootstrap 5 has dropped support for Glyphicons. Since the local Bootstrap 3 assets (including font files) are being removed in this PR, these icons will likely fail to render unless the font files are manually included or the project migrates to an alternative like Bootstrap Icons or FontAwesome. If you intend to keep using Glyphicons, ensure the font files are still accessible and correctly referenced via @font-face.

gemini-code-assist · 2026-04-08T01:24:06Z

resources/templates/layout.tmpl

-							<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
-								<span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
+							<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">
+								<span class="caret"></span> <span class="visually-hidden">Toggle Dropdown</span>


In Bootstrap 5, the .caret class and the corresponding  are no longer used for dropdown arrows; the arrow is now handled via CSS on the .dropdown-toggle class. This element can be safely removed.

Toggle Dropdown

gemini-code-assist · 2026-04-08T01:24:06Z

resources/templates/layout.tmpl

-							<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
-								Safe revert to <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
+							<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">
+								Safe revert to <span class="caret"></span> <span class="visually-hidden">Toggle Dropdown</span>


In Bootstrap 5, the .caret class is no longer required for dropdown toggles as the arrow is styled via CSS. You can remove this span to clean up the markup.

Safe revert to Toggle Dropdown

gemini-code-assist · 2026-04-08T01:24:06Z

resources/templates/layout.tmpl

+				var dismissAlert = e.target.closest('[data-dismiss="alert"]');
+				if (dismissAlert) {
+					var alert = dismissAlert.closest('.alert');
+					if (alert) alert.remove();


Using alert.remove() directly removes the element from the DOM without triggering Bootstrap's transition effects or events. It is recommended to use the Bootstrap Alert API for a cleaner dismissal that respects the framework's lifecycle.

if (alert) { var bsAlert = bootstrap.Alert.getOrCreateInstance(alert); if (bsAlert) bsAlert.close(); }

renecannao merged commit 859a306 into master Apr 8, 2026
5 of 6 checks passed

gemini-code-assist bot reviewed Apr 8, 2026

View reviewed changes

renecannao mentioned this pull request Apr 9, 2026

Bug: Functional tests broken since named-channels merge — orchestrator discovery hangs in CI #92

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade web UI from Bootstrap 3 to Bootstrap 5.3#76

Upgrade web UI from Bootstrap 3 to Bootstrap 5.3#76
renecannao merged 1 commit intomasterfrom
issue74-web-ui-refresh

renecannao commented Apr 8, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Apr 8, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Apr 8, 2026

Uh oh!

gemini-code-assist bot Apr 8, 2026

Uh oh!

gemini-code-assist bot Apr 8, 2026

Uh oh!

gemini-code-assist bot Apr 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

renecannao commented Apr 8, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

renecannao commented Apr 8, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Apr 8, 2026 •

edited

Loading